在mouseover / mousemove上显示X轴值(Show X axis value on mouseover/mousemove)

在mouseover / mousemove上显示X轴值(Show X axis value on mouseover/mousemove)

我试图在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");

然后我还使用mouseover，mousemove和mouseout方法将一个矩形（使用“fill”：“none”和“pointer-events”：“all”作为“overlay”类） 附加到canvasMarket ，每个方法都调用一个相应的a功能：

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);

我还创建了一个mousemove函数thate得到最接近鼠标的值（d），我试图用d来显示当前的X值...通过使用类似xScale（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;}

在此先感谢您的帮助！

I'm trying to show the year on the X axis for the current point I am mousing over on my chart. similar to how it is here: http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html?_r=0

Here is what I'm working on: jsfiddle.net/Rlightner/u3H8h/

I have set the X axis display to none: to hide the whole x axis initially, (canvasMarket is the variable for my svg):

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

Then I've also appended a rectangle (with "fill": "none" and "pointer-events": "all" as the "overlay" class) to canvasMarket with mouseover, mousemove, and mouseout methods, each calling a respective a function:

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);

I've also created a mousemove function thate gets the value (d) closest to the mouse, I was trying to use d to reveal the current X value... by using something like xScale(d.date) to select the current X axis date

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;}

thanks in advance for help!