缩放时如何同步多个d3图表？答案

【问题标题】：how to synchronize multiple d3 charts when zoomed?缩放时如何同步多个d3图表？
【发布时间】：2017-08-30 22:42:01
【问题描述】：

 function chart (data, selector) { 
        // generate chart with zoom feature. it scales the X domain and update the chart accordingly. 
    } 
chart(dataset1, "#chart1")
chart(dataset2, "#chart2")
chart(datasetn, "#chartn")

上面的代码是一个图表生成器函数，我给它不同的数据集来制作图表。在所有图表中，数据集的 X 值相同但 Y 值不同。

问题：

假设我们有 3 个图表，所有 X 轴范围都在 0-100 之间。在第一个图表中，我拖动鼠标并在 30-60 之间创建一个缩放框，第一个图表更新，现在它在 30-60 之间缩放。但是第二张和第三张图表完好无损。我需要它们在 30-60 之间进行更新。

同样，如果我对第二个图表执行相同操作，我需要更新第一个和第三个图表。

这里是jsfiddle 来说明

【问题讨论】：

使用 jsfiddle 创建一个演示，解释当你做 X/Y/Z 时会发生什么，以及到目前为止你尝试了什么......
代码太多了 :( 让我进一步澄清我的问题。
代码太多也没关系。如果您需要帮助，您应该让其他人使用基本结构......
@Dekel 我添加了小提琴。你介意检查一下。谢谢，
现在我们可以使用它了

标签： javascript angularjs reactjs d3.js charts

【解决方案1】：

我没有做太大的修改来使它工作。首先，我们在 var charts 数组中全局记住单个图表的信息。这是在创建图表时完成的

charts.push(lineChart(data1,"#chart1"));
charts.push(lineChart(data2,"#chart2"));
charts.push(lineChart(data3,"#chart3"));

接下来我们可以在函数zoomdrag 和update 中使用这个数组。这项工作可能并不完美（缺少图表重置），但展示了如何处理它并在所有图表中获得相同的缩放。这里是jsfiddle

【讨论】：

谢谢，这是个好主意！为了刷新，因为我使用的是角度，我应该在 lineChart() 函数中使用观察器并在那里刷新图表还是你有更好的主意？
是的，当然可以。您必须处理的一件事是同步更改并避免更新结束循环。
我注意到工具提示不适用于 safari。我正在使用 foreignObject 来做到这一点。你知道这是为什么吗？还不能解决。