在 D3 中放大和缩小时如何更改平移和缩放的速度(使用 zoom.on & d3.event.translate, d3.event.zoom)? [英] How to change speed of translate and scale when zooming in and out in D3 (using zoom.on & d3.event.translate, d3.event.zoom)?

问题描述

当用户使用鼠标滚轮滚动时，您可以调整缩放速度吗?

Can you adjust the speed of the zoom when the user scrolls in and out using the mousewheel?

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

My understanding is that the zoom.on (https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-on) listener produces the two events d3.event.translate & d3.event.zoom, which contain matrices or coordinates that when passed to the translate or scale functions, allow panning and rescaling of the graphic.

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

But how do I speed this up, so that if the user moves his mousewheel by a little, she rapidly zooms in or out? I have a large visualization that I want to allow users to zoom in and out of rapidly with the mousewheel. Can I simply modify/add arguments to the above existing events and functions or do I have to create my own? I have a feeling some of the above is inaccurate/patchy in terms of understanding, so please explain if so.

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

Very simple jsfiddle example here: http://jsfiddle.net/fiddler86/6jJe6/, with identical code below:

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 + ")");
};     

推荐答案

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

You need adjust the scale inside the function with a mathematical function when you select the function the important is that for x=0 the y=0 you can use pow is easier in this case Math.pow(d3.event.scale,.1) the second parameter does the zoom more slowly when is smaller.

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

It´s not a good idea use a very complicated function because the browser will turn slow.

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

When you have the new scale, you need recalculate the translation. You don´t complicate the problem, in SVG you have the actual height with this.getBBox().height this ok, but it is not exactly because you are one iteration behind. You could calculate the new height with (originalHeight * scale) and the translate with (originalHeight - (originalHeight * scale))/2

• 那么 origialHeight*scale 是新的高度

• Well origialHeight*scale is the newHeight

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

The originalHeight - newHeight is the difference, and you want the center, you need divide for 2, the half part of the square and the half part below.

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

Now we need do the action with the width. It is the same

代码:

    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硬编码了，可以用一个属性，用常数...

Note that I put the 200 and 300 hardcoded, you can use a property, use constant...

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

这篇关于在 D3 中放大和缩小时如何更改平移和缩放的速度(使用 zoom.on & d3.event.translate, d3.event.zoom)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！