单个缩放在一个浏览器窗口中的两个单独的D3树上，但不同的svg

我在一个HTML中添加了两个svg面板，两者都显示单独的树。我想在两个面板上添加个别缩放行为。单个缩放在一个浏览器窗口中的两个单独的D3树上，但不同的svg

目前变焦功能的工作只在面板的一个

变焦功能可按1

```

var zoom = function() { 
    var scale = d3.event.scale, 
     translation = d3.event.translate, 
     tbound = -height * scale, 
     bbound = height * scale, 
     lbound = (-width + margin.right) * scale, 
     rbound = (width - margin.left) * scale; 
    // limit translation to thresholds 
    translation = [ 
     Math.max(Math.min(translation[0], rbound), lbound), 
     Math.max(Math.min(translation[1], bbound), tbound) 
    ]; 
    svg.attr("transform", "translate(" + translation + ")" + " scale(" + scale + ")"); 
}

```

变焦功能可按2 ```

var zoom2 = function() { 
    var scale2 = d3.event.scale, 
     translation2 = d3.event.translate, 
     tbound2 = -height2 * scale2, 
     bbound2 = height2 * scale2, 
     lbound2 = (-width2 + margin2.right) * scale2, 
     rbound2 = (width2 - margin2.left) * scale2; 
    // limit translation to thresholds 
    translation2 = [ 
     Math.max(Math.min(translation2[0], rbound2), lbound2), 
     Math.max(Math.min(translation2[1], bbound2), tbound2) 
    ]; 
    svg2.attr("transform", "translate(" + translation2 + ")" + " scale(" + scale2 + ")"); 
}

I am creating two of such functions and calling them with each of the tree

d3.select("svg") 
     .call(d3.behavior.zoom() 
     .scaleExtent([0.5, 5]) 
     .on("zoom", zoom));

d3.select("svg") 
     .call(d3.behavior.zoom() 
     .scaleExtent([0.5, 5]) 
     .on("zoom", zoom2));

``` 但仅仅是在端部限定所述功能正在工作。

如何为两个树添加单独的缩放。

来源

2017-10-06 jaya sharma

该问题已解决，

的解决方案是使用ID同时获得SVG。 ```

d3.select("#Chart svg") 
     .call(d3.behavior.zoom() 
     .scaleExtent([0.5, 5]) 
     .on("zoom", zoom2));

```

来源

2017-10-06 06:13:08

单个缩放在一个浏览器窗口中的两个单独的D3树上，但不同的svg

回答

相关问题