在鼠标悬停/鼠标移动时显示X轴值

我正在尝试在我的图表上显示当前点的X轴上的年份。类似的是怎么在这里：http://www.nytimes.com/interactive/2012/11/30/us/tax-burden.html?_r=0 在鼠标悬停/鼠标移动时显示X轴值

这里是我的工作：jsfiddle.net/Rlightner/u3H8h/

我已经设置了X轴显示为none：最初隐藏整个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方法，每个调用respectiv EA功能：

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

我还创建了一个鼠标移动功能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;}

在此先感谢您的帮助！

来源

2013-11-04 NewToJS

您目前的'mousemove'函数不能正常工作吗？ –

Mousemove正在工作。我只是想弄清楚如何获得只有X轴值（即日期）我徘徊在显示 – NewToJS

现在mousemove函数选择鼠标最接近的数组中的索引号。这个变量是“d”。我想用这个d变量来显示Xaxis的值（即一次只显示一个X轴值，而这个值就是鼠标所在的位置）我试过把它添加到鼠标悬停功能中，但它没有工作：xAxisDisplay.select（xAxis（d.date））。style（“display”，null）; – NewToJS

要做到这一点，你可以用它允许你明确指定刻度值轴的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); 
}

来源

2013-11-05 14:52:56

这里是JS小提琴中的链接：http://jsfiddle.net/Rlightner/u3H8h/ – NewToJS

..你介意看看我想用你的建议做什么？谢谢！ – NewToJS

那么，首先你必须将轴设置为可见，然后我发布的代码基本上按原样工作 - http://jsfiddle.net/u3H8h/4/ –

无法评论。

希望这有助于 - HTML Overlay with pageX/pageY

来源

2013-11-05 12:33:34

在鼠标悬停/鼠标移动时显示X轴值

回答

相关问题