d3.behavior.zoom se agita, tiembla, salta y rebota al arrastrar

Question

Estoy utilizando el d3.behavior.zoom para implementar el paneo y el acercamiento en el diseño de un árbol, pero muestra un comportamiento que describiría como reboteo o numérico inestabilidad. Cuando comiences a arrastrar, la pantalla inexplicablemente saltará hasta desaparecer. El código se ve así:

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

¿Existe una forma mejor de configurar la transformación que no causa este tipo de interferencia?

Answer 1

Después de mirar un poco más de cerca, la inestabilidad proviene de la transformación del elemento svg que se aplica a la ubicación del mouse durante el movimiento. La solución con la que terminé es insertar otro elemento "g" entre el que tiene el comportamiento del zoom y el contenido del elemento específicamente para recibir la transformación zoom/pan:

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