javascript - D3 将鼠标位置反转为 X 轴上最接近的刻度值

Question

我定义了一个 X 轴，其比例如下:

xRange = d3.time.scale().domain([minTime, maxTime]).range([20 , rawSvg.attr("width")]);

X 轴上的刻度是不同的日期值，例如 1 月 1 日、1 月 2 日、1 月 3 日等。我想要一条条或一条线跟随我的鼠标位置，这是我为其编写的代码

var dateMousePosMapper = xRange.invert(d3.mouse(d3.event.currentTarget)[0]);

console.log("mouse pos mapper", dateMousePosMapper.range());

tooltipLine.attr({
    "stroke": "#e8e6e6",
    "stroke-width": '25',
    "x1": xRange(dateMousePosMapper),
    "x2": xRange(dateMousePosMapper),
    "y1": 30,
    "y2": height - 20,
}).style("opacity", 0.5).attr('class', 'multiline-tooltip');

但是，也会为刻度线之间的所有点绘制该线。是否可以将鼠标位置映射到 X 轴上最近的刻度点，并仅显示 X 轴上刻度值上方的线？

Answer 1

您需要做一些事情，正如 kekuatan 所说，您应该使用 d3.bisector 这里的 Mikes example如何使用它。

使用此示例，我们将一行附加到焦点变量

  focus.append("line").attr("class", "x--line")
    .style("stroke", "#777")
    .attr("stroke-width", 1.5)
    .attr("y1",-height)
    .attr("y2",0);

并在mousemove函数中选择它

focus.select(".x--line")
  .attr("transform", "translate(" + x(d.date) + "," + (height) + ")");

}

这是使用此代码的工作示例:Plunker