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

【问题标题】：Show X axis value on mouseover/mousemove在鼠标悬停/鼠标移动时显示 X 轴值
【发布时间】：2013-11-15 10:09:15
【问题描述】：

我试图在 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 鼠标悬停，鼠标移动和 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);

我还创建了一个 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;}

提前感谢您的帮助！

【问题讨论】：

您当前的mousemove 功能如何不起作用？
Mousemove 正在工作。我只是想弄清楚如何只获取我悬停的 X 轴值（又名日期）
现在 mousemove 函数选择数组中鼠标最接近的索引号。这个变量是“d”。我想使用该 d 变量来显示唯一的 Xaxis 值（即一次只显示一个 X 轴值，这将是鼠标所在的那个）我已经尝试将它添加到 mouseover 函数但是它没用：xAxisDisplay.select(xAxis(d.date)).style("display", null);

标签： svg d3.js mouseover axis mousemove

【解决方案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);
}

【讨论】：

..你介意看看我想用你的建议做什么吗？谢谢！
嗯，首先您必须将轴设置为可见，然后我发布的代码基本上可以按原样运行 -- jsfiddle.net/u3H8h/4

【解决方案2】：

无法评论。

希望这会有所帮助 - HTML Overlay with pageX / pageY

【讨论】：