小编use*_*288的帖子

如何在D3中放大和缩小时改变平移和缩放的速度(使用zoom.on&d3.event.translate,d3.event.zoom)?

当用户使用鼠标滚轮滚入和滚出时,您可以调整缩放速度吗?

我的理解是zoom.on(https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-on)监听器生成两个事件d3.event.translate&d3.event.zoom,其中包含矩阵或坐标,当传递给平移或缩放功能时,允许平移和重新缩放图形.

但是如何加快速度呢?如果用户稍微移动鼠标滚轮,她会迅速放大或缩小?我有一个大的可视化,我希望用户可以使用鼠标滚轮快速放大和缩小.我可以简单地修改/添加上述现有事件和函数的参数,还是我必须自己创建?我有一种感觉上面的一些在理解方面是不准确/不完整的,所以请解释如果是这样.

这里非常简单的jsfiddle示例:http://jsfiddle.net/fiddler86/6jJe6/,代码如下:

var svg = d3.select("body").append("svg:svg")
        .attr("width", 1000)
        .attr("height", 2000)      
        .append("svg:g")
            .call(d3.behavior.zoom().on("zoom", redraw))
        .append("svg:g");

svg.append("svg:rect")
.attr("width", 200)
.attr("height", 300)
.attr("fill", 'green');

function redraw() {
    svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
};     
Run Code Online (Sandbox Code Playgroud)

javascript zoom d3.js

8
推荐指数
1
解决办法
2708
查看次数

标签 统计

d3.js ×1

javascript ×1

zoom ×1