Question

我正试图在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将一个矩形（带“fill”：“none”和“pointer-events”：“all”作为“overlay”类）附加到 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函数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;}

提前感谢您的帮助！

Answer 1

无法发表评论。

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

Answer 2

为此，您可以使用轴的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);
}

在mouseover / mousemove上显示X轴值

2 个答案: