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?

Answer 1

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