Question

我目前正在使用鼠标滚轮放大和缩小我的D3力导向图。

有没有办法放慢速度或更快

例如，当我移动鼠标滚轮时，当前缩放比例如下：

1,2,3,4,5.

我希望移动它：

1,1.5,2,2.5,3等等。

这是我的缩放功能：

var minZoom = 0.2,
    maxZoom = 2.5;
    var zoom = d3.behavior.zoom()
    .on("zoom", redraw)
    .scaleExtent([minZoom, maxZoom])//-call zoom but put scale extent on to limit zoom in/out
    ;

我的重绘：

function redraw() //-redraw network
{
    var trans=d3.event.translate;
    var scale=d3.event.scale; 
    svg.attr("transform","translate(" + trans + ")" + " scale(" + scale + ")"); //-translates and scales
}

Answer 1

您可以截取并调整重绘功能内的比例：

function redraw() //-redraw network
 {
  var trans=d3.event.translate;
  var scale=d3.event.scale;
  var newScale = scale / 2;
  zoom.scale(newScale); 
  svg.attr("transform","translate(" + trans + ")" + " scale(" + newScale + ")"); //-translates and scales
 }

或者如果你想要更具体的插值，你可以在draw函数中添加像d3.linear.scale（）这样的插值器：

function redraw() //-redraw network
 {
  scaleInterpolator = d3.linear.scale().domain([1,10,100,1000]).range9([1,3,9,99]);
  var trans=d3.event.translate;
  var scale=d3.event.scale;
  svg.attr("transform","translate(" + trans + ")" + " scale(" + scaleInterpolator(scale) + ")"); //-translates and scales
 }

Answer 2

我标记为重复，原始回复在此处： How to change speed of translate and scale when zooming in and out in D3 (using zoom.on & d3.event.translate, d3.event.zoom)?

您可以根据身高和宽度调整解决方案。您也可以从this.getBBox().height获取此信息。应用比例后，此高度具有值，这种思维始终是一个迭代。如果你添加真正的高度和宽度会更好。

 function redraw() {
        var scale =  Math.pow(d3.event.scale,.1);
        var translateY = (height - (height * scale))/2;
        var translateX = (width - (width * scale))/2;

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

在这一行中：var scale = Math.pow(d3.event.scale,.1); .1是速度因子，当较小

时缓慢

如何在D3中更改缩放速度

2 个答案: