Javascript 如何更改D3中的缩放速度

Javascript 如何更改D3中的缩放速度,javascript,d3.js,Javascript,D3.js,我目前正在使用鼠标滚轮放大和缩小我的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

我目前正在使用鼠标滚轮放大和缩小我的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
}

您可以在重画功能内截取和调整比例:

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
 }
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
 }
或者,如果需要更具体的插值,可以在redraw函数中添加类似d3.linear.scale()的插值器:

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
 }
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
 }

我标记为副本,原始答复如下:

您可以根据自己的身高和宽度调整解决方案。 您也可以从
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是速度的因子,慢慢变小

多亏了这一点,它是有意义的,但当我放大时,它只是缩小,而不是缩小:/当我尝试平移时,它放大并发疯了哈哈,我不确定为什么在这一点上平移与缩放无关,你需要使缩放和平移之间的关系成为可能的重复