D3js：如何清除d3.zoom事件设置的缩放比例？ [英] D3js: How do I clear the zoom scale set by the d3.zoom event?

问题描述

我使用d3.behavior将缩放事件附加到我的SVG，所以使用鼠标滚轮我可以得到一个缩放事件与平移和缩放，然后我用来设置元素的transform属性。

I am using the d3.behavior to attach a zoom event to my SVG, so then the mouse wheel is used I can get a zoom event with translate and scale which I then use to set the transform attribute of the element.

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

It seems the zoom.scale value is persistent somewhere so every time the mouse wheel is used it always contain the correct zoom value, taking into account of all the previous zoom events. This is cool but I need a way to clear that value, say a reset zoom button. When the user clicked on the button, next time he scrolls to zoom the element will be scaling from its original size again.

那么D3存储这个值的方式我重置了它？

So where does D3 store this value and how do I reset it?

UPDATE：

这个问题还有另一个方面：如果我以编程方式设置 transform属性进行缩放变换，缩放事件不会考虑这些。所以如果我以后使用鼠标滚轮缩放我是螺钉，因为我可以捣毁原始的变换。因此，我需要一种方法来以编程方式设置，而不只是重置缩放事件的翻译和缩放值，无论它存储它们。

UPDATE:
This question also has another aspect in it: if I programmatically set the "transform" attribute to do a scaling transformation, the zoom event will not take those into account. So if I later use mouse wheel to zoom I am screw because I can trashing the original transformation. Thus I need a way to programmatically set, not just reset, the "translate" and "scale" value of the zoom event, wherever it is storing them.

推荐答案

缩放比例存储在缩放对象中。我猜你有一行代码看起来像：

The zoom scale is stored in your zoom object. I'm guessing you have a line of code that looks like:

var zoom = d3.behavior.zoom() 

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

Getting the scale from that object is simple:

zoom.scale()

要缩小x2： / p>

To zoom out x2:

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

翻译的工作方式相同， zoom.translate（）和 zoom.translate [x，y]）以获取和设置。

Translation works the same way, with zoom.translate() and zoom.translate( [x, y] ) to get and set.

要保持显示变换与缩放同步，更新一个，另一个也更新。

To keep the display transform in sync with the zoom, just make sure that when you update one, the other is also updated.

这篇关于D3js：如何清除d3.zoom事件设置的缩放比例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！