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

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

1 个答案: