D3.js 如何链接D3缩放和平移控件

我想将多个图表的缩放和平移控件链接在一起，以便在其中一个图表平移和缩放控件启用时，它们都可以一起平移和缩放

我尝试创建一个缩放对象并将其传递给图表，但只有最后一个图表实际平移和缩放。其他人保持静止，即使我在他们的区域放大

这是图表的快照。每个图表都有一个概览图表，其中包含一个也可以移动的视口。我希望将所有控件链接在一起，以便每个图表上的视口也相同

那么，如何链接多个图表上的平移和缩放控件

下面是此代码的JSFIDLE：

这是我的密码：

整体图表创建者。此代码生成3个图表

定义[ “d3”， “组件/sl”， “模拟数据”， “组件/烛台系列”， “图表” ]，函数d3，sl，模拟数据，烛台系列，图表{ "严格使用",； 函数生成数据 { var数据=新的MockData0.1,0.1100,50，功能力矩{ return！moment.day==0 | | moment.day==6； } .生成新日期2014年1月1日，新日期2014年8月1日； 返回数据； } var数据=生成数据； d3.选择“图表1” .datumdata .呼叫图； 数据=生成数据； d3.选择“图表1” .datumdata .呼叫图； 数据=生成数据； d3.选择“图表1” .datumdata .呼叫图； }; 从这个例子中：

创建缩放：

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

function zoomed() {
  container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

在容器上调用zoom：

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    .call(zoom); //<<<<<HERE

变换每个画布/容器

    function zoomed() {
      container1.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
container2.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
container3.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

在所有容器上调用zoom：

    var svg1 = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
        .call(zoom); //<<<<<HERE

var svg2 = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
        .call(zoom); //<<<<<HERE

var svg3 = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
        .call(zoom); //<<<<<HERE

---

按照这些思路应该可以工作，但如果没有任何示例，就无法对其进行测试。

您的代码运行不正常。做一把小提琴，这样我们可以看一看。但是我要做的是调用zoom函数，在这个函数中，您可以在svg上调整大小/转换，我只需要同时调用每个容器好的，我会做一个小提琴。我以前没有做过小提琴，所以我不知道如何制作一个使用require和代码分布在多个文件上的小提琴。我会继续努力的。@thisonegoy我已经为这段代码创建了一个提琴。主图表在开头，配置代码在底部。我不得不在中间添加一些库代码，因为我不能从外部资源中获得一些LIBs。你能给我一些关于如何访问所有控件以便同时更新它们的更多线索吗？谢谢，非常有用。