mouseover/mousemove에서 X 축 값 표시

Question

현재 차트에 마우스를 올려 놓고있는 시점의 X 축에 연도를 표시하려고합니다. 이 여기에 방법과 유사한 http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html?_r=0 다음

내가 일하고 있어요 무엇 : jsfiddle.net/Rlightner/u3H8h/

내가 없음으로 X 축 표시를 설정 한

: 처음에 전체 x 축 숨기기 (canvasMarket 내 SVG에 대한 변수) : "포인터 이벤트"를 "없음"과 : 나는 또한 "입력하지"로 (사각형을 추가 한 다음

var xAxisDisplay = canvasMarket.append("g") 
     .attr("class", "xaxis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
     .style("display", "none"); 

로 "모든"은 " 오버레이 "클래스)를 canvasMarket (mouseover, mousemove 및 mouseout 메소드 포함)으로 각각 존중합니다 개 기능 :

canvasMarket.append("rect") 
     .attr("class", "overlay") 
     .attr("transform", "translate("+-tickPadding+",0)") 
     .attr("width", width+(tickPadding*2)) 
     .attr("height", height) 
     .on("mouseover", mouseover).on("mouseout", mouseout).on("mousemove", mousemove); 

는 또한 엑스 스케일 (XScale) 같은 것을 사용하여 ..., 나는 현재의 X 값을 나타 내기 위해 D를 사용하려고 한 MouseMove 이벤트 기능 thate이 값 (D) 마우스에 가장 가까운을 얻는다 만든 (d.date)를 사용하여 현재 X 축 날짜를 선택하십시오.

bisectDate = d3.bisector(function(d) { return d.date; }).left, 

function mousemove() { 
    var x0 = xScale.invert(d3.mouse(this)[0]), 
     i = bisectDate(data, x0, 1), 
     d0 = data[i - 1], 
     d1 = data[i], 
     d = x0 - d0 > d1 - x0 ? d1 : d0;} 

감사합니다.

Answer 1

이 작업을 수행하려면, 당신은 당신이 명시 적으로 틱 값을 지정할 수 있습니다 축의 tickValues() function 사용할 수 있습니다. 하나만 보여주고 싶은 가치를 전달할 것입니다. 그러나 극단적 인 가치를 보여줌으로써 관점을 제시하고자 할 수도 있습니다.

코드는 다음과 유사합니다.

function mousemove() { 
    var x0 = xScale.invert(d3.mouse(this)[0]), 
     i = bisectDate(data, x0, 1), 
     d0 = data[i - 1], 
     d1 = data[i], 
     d = x0 - d0 > d1 - x0 ? d1 : d0; 

    xAxis.tickValues([min,d,max]); 
    canvasMarket.select("g.xaxis").call(xAxis); 
} 

Answer 2

설명 할 수 없습니다.

희망이 도움이 - HTML Overlay with pageX/pageY