javascript - ejemplos - d3js charts examples

¿Por qué d3.js v3 rompe mi gráfico de fuerzas al implementar el zoom cuando v2 no lo hace?

Question

Tengo un diseño de fuerza que he creado usando d3.js

Me gustaría tener tanto la funcionalidad normal de un diseño de fuerza arrastrable como la capacidad de ampliar.

Básicamente copié / pegué el código de zoom de este código ( http://jsfiddle.net/nrabinowitz/QMKm3/ ). Esta es la misma manera de hacer zoom que Mike Bostock usa en este ( http://bl.ocks.org/mbostock/3680957 ) ejemplo.

Aquí está mi código: http://jsfiddle.net/kM4Hs/6/

Como se puede ver claramente en el mío, el zoom funciona bien, pero no puedo seleccionar nodos individuales en el diseño de la fuerza y ​​los arrastro.

He encontrado que el culpret es el hecho de que los otros autores usan d3.v2.js en lugar del d3.v3.js más nuevo que estoy usando. Cuando cambio mi importación a v2, funciona perfectamente. Sin embargo, en aras del progreso y el buen código general, me gustaría usar v3 si es posible.

<script type=''text/javascript'' src=''http://d3js.org/d3.v3.min.js''></script>
versus
<script type=''text/javascript'' src=''http://d3js.org/d3.v2.min.js''></script>

Dos preguntas: ¿por qué v3 rompe el diseño de la fuerza cuando v2 no lo hace, y, más importante aún, qué puedo hacer, en todo caso, para solucionarlo?

¡Gracias por adelantado!

Answer 1

Si examina detenidamente las notas de la versión , verá una explicación completa de todo lo que ha cambiado entre la versión final de 2.x (2.10.3) y la versión más reciente, 3.2.7. En particular, desde la versión 3.2.2:

Mejor manejo de gestos de arrastre en d3.behavior.drag, d3.behavior.zoom y d3.svg.brush evitando comportamientos predeterminados o deteniendo la propagación. Por ejemplo, mousedown ahora cambia el foco, el mouseup fuera de un iframe funciona correctamente y touchstart no tartamudea.

Por lo tanto, en V2, el comportamiento de arrastre podría tener prioridad sobre el comportamiento del zoom al detener la propagación en eventos de zoom. En V3, esto ya no ocurre automáticamente, lo que le permite elegir qué comportamiento tiene prioridad y cuándo.

Si desea dar prioridad al comportamiento del arrastre al arrastrar los nodos, entonces debe stopPropagation en los eventos de entrada mientras lo arrastra, de modo que estos eventos no se interpreten simultáneamente como panoramización por el comportamiento del zoom. Detener la propagación en dragstart es suficiente:

var drag = d3.behavior.drag()
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
.on("drag", function() { /* handle drag event here */ });

Si usa un diseño de fuerza, el código es:

var drag = force.drag()
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });

Ejemplo de trabajo:

Nota: la combinación de estos dos comportamientos significa que la interpretación de gestos es ambigua y altamente sensible a la posición. Hacer clic en un círculo se interpreta como arrastrar ese círculo, mientras que un clic a un píxel de distancia podría interpretarse como un panorama del fondo. Un método más sólido para combinar estos comportamientos es emplear la modalidad. Por ejemplo, si el usuario mantiene presionada la tecla ESPACIO, al hacer clic y arrastrar se interpreta como panorámica, en lugar de arrastrar, independientemente de la ubicación del clic. Este enfoque se utiliza comúnmente en software comercial como Adobe Photoshop.