d3.js – D3js:如何清除d3.zoom事件设置的缩放比例?

前端之家收集整理的这篇文章主要介绍了d3.js – D3js:如何清除d3.zoom事件设置的缩放比例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用d3.behavior将缩放事件附加到SVG,所以使用鼠标滚轮可以使用翻译和缩放来获取缩放事件,然后使用它来设置元素的transform属性.

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

那么D3在哪里存储这个值,我该如何重置呢?

更新:
这个问题还有另一个方面:如果我以编程方式设置“transform”属性来进行缩放变换,那么缩放事件将不会考虑到这一点.所以如果我以后用鼠标滚轮放大我是螺丝,因为我可以打破原来的转换.因此,我需要一种以编程方式设置缩放事件的“翻译”和“缩放”值的方式,而不仅仅是重置它们存储它们的位置.

解决方法

缩放比例存储在缩放对象中.我猜你有一行代码看起来像:
var zoom = d3.behavior.zoom()

从该对象获取比例是很简单的:

zoom.scale()

缩小x2:

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

翻译的工作原理与zoom.translate()和zoom.translate([x,y])相同.

为了保持显示变换与缩放同步,只需确认当您更新一个时,另一个更新.

猜你在找的JavaScript相关文章