javascript - 使用 d3 实现缩放按钮

Question

我正在尝试使用 d3 开发图形可视化网页，我需要在图形上提供基本的缩放和平移功能。

我看到了 d3.behaviour.js 文件来了解缩放功能是如何工作的。就默认行为而言，这很好。但是有什么方法可以手动调用缩放功能，比如说通过附加它来缩放它和缩小按钮。

Answer 1

d3 中的缩放行为似乎与鼠标事件密切相关。

您可以做的解决方法是在您单击按钮时手动触发“mousewheel”（即/webkit）和“DOMMouseScroll”（firefox）事件。

您可以在此处查看有关如何注册和调度这些事件的示例：http: //jsfiddle.net/6nnMV/

Answer 2

我认为您只需要获取当前比例，将其增加/减少一，然后将其设置回https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-scale。

之后，使用https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-event用新的比例更新可视化。