我试图在 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 ,每个方法调用一个相应的功能:
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 函数,它获取最接近鼠标的值 (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;}
提前感谢您的帮助!