게시판

운영시간 및 연락처 010-6569-0182 ilifo@cslee.co.kr
월~금요일
09:00~18:00
점심시간
12:00~13:00

궁금해요

Nostalgia

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

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

오류 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));
  }

     

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