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如何使用它的示例 。

在这个例子中，我们在focus变量后面添加了一行

  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