D3 鼠标位置反转到 X 轴上最接近的刻度值答案

【问题标题】：D3 Inversion of mouse position to closest tick value on the X-axisD3 鼠标位置反转到 X 轴上最接近的刻度值
【发布时间】：2018-01-09 07:10:07
【问题描述】：

我有一个用如下比例定义的 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 轴上的刻度值上显示线？

【问题讨论】：

是的，使用d3.bisector，先试试，如果不行，做简单的代码分享一下，再更新你的问题

标签： javascript d3.js

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

【讨论】：