D3.js D3可重用图表更新时tootip跟随错误的图表

我根据Mike Bostock的《走向可重用图表》创建了两个图表，下面是可视化的链接：

---

工具提示（现在是圆形和垂直线）一开始看起来还可以，但当您选择下拉项或单击按钮时，该线和圆形适用于您单击或选择的图形，但如果转到另一个图形，而不是让工具提示跟随该图形上的线，它似乎遵循一条不同的不可见线。我已经被困在这个问题上好几个星期了，我想知道是否有人能给我指出正确的方向。非常感谢你！这里是我的回购的链接：

问题是两个图都有相同的

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。

问题是两个图都具有相同的

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。

非常感谢您的反馈！今天我将编辑我的代码并试一试！另外，对于如何为可重用图表创建两个或多个xScale和yScale，您有什么建议吗？与其在选择之外声明它们。每个，我是否应该在其中声明它们，并根据每个图为xScale和yScale指定不同的名称？我将为图2指定不同的名称xScale1和xScale2谢谢您的反馈！今天我将编辑我的代码并试一试！另外，对于如何为可重用图表创建两个或多个xScale和yScale，您有什么建议吗？与其在selections.each之外声明它们，不如在其中声明它们，并根据每个图为xScale和yScale指定不同的名称？我将为图2指定不同的名称xScale1和xScale2