0

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

提前感谢您的帮助！

4

2 回答 2

0

为此，您可以使用轴的tickValues()功能，该功能允许您明确指定刻度值。您将传递您想要显示的唯一值，尽管您可能还想显示极值以给出一些观点。

代码看起来像这样。

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-05T14:52:56.323 回答
0

无法发表评论。

希望这会有所帮助 -带有 pageX / pageY 的 HTML 覆盖

于 2013-11-05T12:33:34.110 回答