使用d3实现缩放按钮

时间:2011-07-21 13:24:20

标签: javascript svg d3.js zoom pan

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

我看到了d3.behaviour.js文件,看看缩放功能如何 作品。就默认行为而言,这很好。但是有吗 可以通过手动调用缩放功能的任何方式 将其固定以缩放和缩小按钮。

2 个答案:

答案 0 :(得分:3)

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

您可以执行的解决方法是在单击按钮时手动触发'mousewheel'(即/ webkit)和'DOMMouseScroll'(firefox)事件。

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

答案 1 :(得分:0)

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

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