javascript - 如何在缩放时同步多个 d3 图表？

Question

 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到插图

Answer 1

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

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

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