如何更改D3的缩放速度

Question

I am currently using the mouse-wheel to zoom in and out on my D3 force directed graph.

Is there a way of zooming in slower or quicker

For example, say the scale currently moves like this when I move the mouse wheel :

1,2,3,4,5.

I wish to move it :

1,1.5,2,2.5,3 and so on.

Here is my zooming function :

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
    ;

My redraw :

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

You can intercept and adjust the scale inside the redraw function:

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
 }

Or if you want more specific interpolation, you can add an interpolator like d3.linear.scale() into the redraw function:

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

I mark as duplicate and the original reply is in here: How to change speed of translate and scale when zooming in and out in D3 (using zoom.on & d3.event.translate, d3.event.zoom)?

You can adapt the solution with you height and your width. You can get this info as well from this.getBBox().height . This height have the value after apply the scale, this mind that you are always an iteration behind. Better if you add the real height and width.

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

In this line: var scale = Math.pow(d3.event.scale,.1); .1 is the factor of velocity, slowly when smaller