更新

Question

我创建了两张基于Mike Bostock的可重用图表图表，这里是可视化的链接：http://jhjanicki.github.io/reusable-chart-tooltip/ 工具提示（现在的圆圈和垂直线）一开始似乎没问题，但是当您选择下拉项目或单击按钮时，线条和圆圈适用于您单击或选择的图形，但如果您去了到另一个图表，而不是让工具提示按照该图表上的线条，它似乎遵循不同的不可见线。我已经被困在这几个星期了，我想知道是否有人能指出我正确的方向。非常感谢你！以下是我的回购链接：https://github.com/jhjanicki/reusable-chart-tooltip

Answer 1

问题是这两个图表都有相同的xScale和yScale

因此，当您更改数据时，您将重置域名：

 xScale
.domain(d3.extent(data, function(d) { return d.date; }))
.range([0, width- margin.left - margin.right]);

两个图表都在查看相同的xScale，因此鼠标悬停时，下面的计算将失败。

xScale.invert(d3.mouse(this)[0]), 

您还可以了解最初两个图表相同的情况。 所以它有效。 但是，当您更改其中一个图表的数据时，xscale将会出现问题。

因此，修复两个图表应该具有不同的xScale。