镜像平移/缩放两个 svg 元素答案

【问题标题】：Mirrored pan/zoom two svg elements镜像平移/缩放两个 svg 元素
【发布时间】：2015-12-30 17:38:51
【问题描述】：

我需要使用 d3 构建两个力图，并使它们同时缩放/平移。我通过将缩放事件中的 d3.event.scale() 和 d3.event.translate() 属性强制到两个 svg 上来实现这一点；问题是每个svg在从一个切换到另一个时都会以某种方式保存它以前的翻译/缩放值。

我正在使用 d3 示例中的这段代码来制作两个 svg 的平移/缩放

// Set up zoom support
var zoom = d3.behavior.zoom()
        .on("zoom", function() { 
            inner.attr("transform", 
                       "translate(" + d3.event.translate + ")" 
                       + "scale(" + d3.event.scale + ")"); });
svg.call(zoom);

http://jsfiddle.net/c1qja29o/2/

http://www.screencast.com/t/Mtceb6o55XG

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

问题是我在每个 svg.each() 传递中声明了一个新的缩放处理程序。我应该只声明一个缩放事件处理程序并为每个 svg 调用那个。

【讨论】：