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

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

Answer 2

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