D3 diseño vigor: hacer el molde sobre arrastre (zoom) más suave

Question

tengo un gráfico trazado fuerza estática d3.js que pueden llegar a ser muy grande (a veces partes de ella se recortan), así que me gustaría para que el usuario recorra todo el gráfico arrastrando. No creo que necesite arrastrar nodos individuales, tengo la sensación de que va a ser confuso, pero me gustaría hacer que sea posible mostrar las partes del gráfico que están recortadas por los límites svg.

Tengo un ejemplo mínimo en http://bl.ocks.org/3811811, que utiliza

visF.append("rect") 
.attr("class", "background") 
.attr("width", width) 
.attr("height", height) 
.call(d3.behavior.zoom().on("zoom", redrawVisF)); 
function redrawVisF() { 
    visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 
} 

para implementar el panorama, pero me parece que realmente "skittery" y no muy suave en absoluto, hasta el punto en que supongo evitará que la gente intente la función de arrastre. ¿Alguien ha tenido una idea de por qué sucede esto y/o una idea de cómo solucionarlo?

Answer 1

El problema es que d3.behavior.zoom recupera la posición actual del mouse en relación con el elemento contenedor del elemento cliqueado, y está moviendo el elemento contenedor. Entonces, la posición relativa cambia constantemente, de ahí el efecto de jittering que estás viendo.

Es probable que desee mover el fondo <rect> para que sea un elemento directo del elemento <svg>. Esto logra dos cosas:

1. La posición ahora será relativa al contenedor <svg>, que no se mueve.
2. Actualmente, se están moviendo la <rect> cuando uno se acerca o sartén, por lo que los cambios en el área con zoom y algunas partes de la ventana ya no es ampliable. Tener el fondo <rect> en el mismo lugar soluciona este problema también.