如何在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)?

问题描述

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

我的理解是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 ）.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）第二个参数在缩小时变得更慢。

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

当您拥有新的比例时，您需要重新计算翻译。你不会复杂的问题，在SVG中你有实际的高度与 this.getBBox（）。height 这确定，但它不完全是因为你是一个迭代背后。你可以用（originalHeight * scale）和（originalHeight - （originalHeight * scale））/ 2

• well origialHeight * scale is the newHeight




• originalHeight - newHeight是不同之处，您想要
  中心，您需要除以2，正方形的一半部分和下面的
  一半部分。




• 现在我们需要做宽度的动作。它是相同的

  
  

< b $ b

  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 /

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

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.

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

解决方案

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.

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

• Well origialHeight*scale is the newHeight

• 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

The code:

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

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

I created a fiddler: http://jsfiddle.net/t0j5b3e2/

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