如何在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,其中包含矩阵或坐标,当传递给平移或缩放功能时,允许平移和重新缩放图形.

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

这里非常简单的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

• 原始的高度*规模是新的高度

• 原来的高度 - 新的高度是差异,你想要中心,你需要分为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硬编码,你可以使用属性,使用常量...

我创建了一个小提琴手:http://jsfiddle.net/t0j5b3e2/