CODEWITHSUNDEEP
d3.js
Bretton Wade
Bretton Wade

Reputation: 957

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

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?

Upvotes: 27

Views: 7520

Answers (2)

Cels
Cels

Reputation: 1334

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")...

Upvotes: 1

Bretton Wade
Bretton Wade

Reputation: 957

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")...

Upvotes: 55

Related Questions