d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging

Question

I am using the d3.behavior.zoom to implement panning and zooming on a tree layout, but it is exhibiting a behavior I would describe as bouncing or numeric instability. When you start to drag, the display will inexplicably jump around until it just disappears. The code looks like this:

var svg = target.append ("g");
...
svg.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 2.0])
    .on("zoom", function() {
        svg.attr("transform","translate(" + d3.event.translate[0] + "," +  d3.event.translate[1] + ") scale(" +  d3.event.scale + ")");
    })
);

Is there a better way to set the transformation that doesn't cause this type of interference?

score 55 · Answer 1 · answered Jun 12 '12 at 15:03

55

After looking a bit more closely, the instability is coming from the svg element's transformation being applied to the mouse location during movement. The solution I ended up with is to insert another "g" element between the one with the zoom behavior and the element content specifically to receive the zoom/pan transformation:

var svg = target.append ("g");
var child = svg.append ("g");
...
svg.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 2.0])
    .on("zoom", function() {
        child.attr("transform","translate(" + d3.event.translate[0] + "," +  d3.event.translate[1] + ") scale(" +  d3.event.scale + ")");
    })
);
...
child.append("line")...

answered Jun 12 '12 at 15:03

Bretton Wade

958
8
15

2

Thanks! I was having the same trouble. This helped. – MSquared Feb 25 '15 at 23:35
2

You star! I thought this was going to take deep manual reading to fix but your answer means I lose a little less hair today! – Christopher Gutteridge Jul 13 '16 at 09:34
1

Brilliant solution. It worth 1 million dollar! Solve a big problem to me. – new2cpp Nov 08 '16 at 03:27
3

Thanks, that worked although I didn't figure it out right away - just to be clear: you shouldn't attach the zoom listener on the object you want to transform. – Double M Nov 15 '16 at 14:31

score 1 · Answer 2 · answered Mar 06 '20 at 15:28

This answer is a tweaked version of @Bretton Wade's answer using D3.js v4.

    var svg = target.append ("g");
    var child = svg.append ("g");
    ...
    svg.call (d3.zoom()
        .on("zoom", function() {
            child.attr("transform", d3.event.transform);
        })
    );
    ...
    child.append("line")...

d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging

2 Answers2

Linked