궁금해요

Nostalgia

자바스크립트 d3 그래프 .on mousemove

작성자 : Nostalgia 작성일 : 2016.11.01 11:27:58 댓글수 : 1 조회수 : 493

오류 log Uncaught TypeError: Cannot read property 'sourceEvent' of null;

svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove)
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

 

function mousemove() {
     var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
    focus.select("text").text((d.close));
}
   오류 부분은 밑줄 친 부분에서 납니다. 

http://bl.ocks.org/mbostock/3902569 이곳처럼 그래프 위에 마우스를 갖다 대면 해당 지점의 y값을 나타내게 하려 합니다. 왜 그런지 알 수 있을까요?

첨부파일

  • mousemove 함수를 아래 함수로 대체해서 console에 나온 로그 좀 보여주세요.

     

    
      function mousemove() {
    
    	console.log('---------------------------------------------');
    	console.log('- overlay');
    	console.log(this);
    
    	console.log('- mouse ');
    	console.log(d3.mouse(this)[0]);
    	
    	console.log('- invert');
    	console.log(x.invert(d3.mouse(this)[0]));
    	
        var x0 = x.invert(d3.mouse(this)[0]),
            i = bisectDate(data, x0, 1),
            d0 = data[i - 1],
            d1 = data[i],
            d = x0 - d0.date > d1.date - x0 ? d1 : d0;
        focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");
        focus.select("text").text(formatCurrency(d.close));
      }

     

  • 댓글을 입력 하시려면 로그인 해주세요.