javascript - 在 D3 中放大和缩小时如何更改平移和缩放的速度(使用 zoom.on 和 d3.event.translate，d3.event.zoom)？

Question

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

我的理解是 zoom.on (https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-on) 监听器产生两个事件 d3.event.translate 和 d3.event.zoom，它们包含矩阵或坐标，当传递给 translate 或 scale 函数时，允许平移和重新缩放图形。

但是我如何加快速度，这样如果用户稍微移动鼠标滚轮，她就会快速放大或缩小？我有一个大型可视化，我想让用户使用鼠标滚轮快速放大和缩小。我可以简单地修改/添加上述现有事件和函数的参数，还是必须创建自己的？我觉得上面的一些内容在理解方面是不准确/不完整的，所以请解释一下。

这里非常简单的 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 + ")");
};     

Answer 1

当您选择函数时，您需要使用数学函数调整函数内部的比例，重要的是对于 x=0 y=0，您可以使用 pow 在这种情况下更容易 Math.pow(d3.event.scale,.1)第二个参数越小，缩放越慢。

使用非常复杂的函数不是一个好主意，因为浏览器会变慢。

当你有了新的比例时，你需要重新计算平移。您不会使问题复杂化，在 SVG 中，您的实际高度为 this.getBBox().height可以，但这并不完全是因为您落后了一个迭代。您可以使用 (originalHeight * scale) 计算新高度和翻译 (originalHeight - (originalHeight * scale))/2

那么原始高度*比例是新高度

originalHeight - newHeight 是不同的，你想要
中心，你需要除以 2，正方形的一半和
下面的一半。

现在我们需要对宽度进行操作。是一样的

代码:

    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() {
        var velocity = 1/10;
        var scale =  Math.pow(d3.event.scale,velocity);
        var translateY = (300 - (300 * scale))/2;
        var translateX = (200 - (200 * scale))/2;

        svg.attr("transform", "translate(" + [translateX,translateY] + ")" + " scale(" +scale+ ")");            
    };

注意我把 200 和 300 硬编码了，可以使用属性，使用常量...

我创建了一个 fiddler : http://jsfiddle.net/t0j5b3e2/