我有一个 SVG 图形,它与 d3 缩放完美配合。但是,需求是添加 slider 并使用 slider 和鼠标滚轮控制缩放。
我现在面临的问题是生成一个转换对象,例如: 让 sliderScale = zoomIdentityManual.scale(newK); //newK 是我计算的基于 slider 的新比例。
又好了。但是当用户在 slider 之后开始通过鼠标缩放时,图形会跳来跳去。我明白为什么。因为鼠标事件与我手动生成的转换对象完全独立。
我找到了这个例子,( http://bl.ocks.org/bollwyvl/871b7c781b92fd0044f5 ),主要区别在于 d3 的版本。它是 v3,我正在使用 v4。正如您在滑动功能中看到的那样:
函数滑动(d){
zoom.scale(d3.select(this).property("值"))
事件(svg);
}
看起来像 .event(svg)
这就是当前事件发生变化的地方。但是版本4没有这样的方法。
总而言之,有没有什么方法可以使 slider 和 d3 缩放一起顺利工作?
最佳答案
我的问题是当 slider 移动时我没有正确缩放。我直接调用函数,但我需要调用 svg 上的缩放操作,例如:
svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
.scale(width / (s[1] - s[0]))
.translate(-s[0], 0));
zoom.transform 是窍门
关于javascript - d3 缩放和 slider 问题一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44729815/