Question

我正在使用d3.behavior将缩放事件附加到我的SVG，然后使用鼠标滚轮我可以获得带有translate和scale的缩放事件，然后我用它来设置元素的transform属性。

似乎zoom.scale值在某处持久存在，因此每次使用鼠标滚轮时，它总是包含正确的缩放值，同时考虑到所有先前的缩放事件。这很酷，但我需要一种清除该值的方法，比如重置缩放按钮。当用户点击按钮时，下次他滚动缩放时，元素将再次从其原始大小缩放。

那么D3存储此值的位置以及如何重置它？

更新
这个问题还有另外一个方面：如果我以编程方式设置“transform”属性来进行缩放转换，则zoom事件不会考虑这些。因此，如果我以后使用鼠标滚轮进行缩放，我会因为我可能会破坏原始转换。因此，我需要一种方法来编程设置，而不仅仅是重置zoom事件的“translate”和“scale”值，无论它存储在哪里。

Answer 1

缩放比例存储在缩放对象中。我猜你有一行代码如下：

var zoom = d3.behavior.zoom()

从该对象获取比例很简单：

zoom.scale()

缩小x2：

zoom.scale( zoom.scale()/2 )

翻译的工作方式相同，只需zoom.translate()和zoom.translate( [x, y] )即可获得和设置。

要使显示转换与缩放同步，只需确保在更新显示时，另一个也会更新。

Answer 2

D3 v5中有一种更简单的方法。您可以调用selection.call(zoom.transform, d3.zoomIdentity);来重置缩放，甚至可以像selection.transition().duration(750).call(zoom.transform, d3.zoomIdentity);一样应用平滑过渡。

来源：

D3js：如何清除d3.zoom事件设置的缩放比例？

2 个答案: