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