Perché d3.js v3 infrange il grafico della forza quando si implementa lo zoom quando v2 no?

Question

Ho un layout di forza che ho creato utilizzando d3.js

Mi piacerebbe avere sia la normale funzionalità di un layout forza trascinabile, nonché la possibilità di zoom.

Ho praticamente copiato/incollato il codice dello zoom da questo codice (http://jsfiddle.net/nrabinowitz/QMKm3/). Questo è lo stesso modo dello zoom che Mike Bostock utilizza in questo esempio (http://bl.ocks.org/mbostock/3680957).

Ecco il mio codice: http://jsfiddle.net/kM4Hs/6/

Come si vede chiaramente nel mio, lo zoom funziona bene, ma sono in grado di selezionare singoli nodi nel layout vigore e trascinarli in giro.

Ho trovato il culpret per il fatto che entrambi gli altri autori usano d3.v2.js piuttosto che il più nuovo d3.v3.js che sto usando. Quando cambio la mia importazione in v2 funziona perfettamente. Tuttavia, nell'interesse del progresso e solo di un generale buon senso, mi piacerebbe usare la v3 se possibile.

<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> 

due domande: perché fa v3 rompere il layout forza quando v2 non, e, cosa più importante, quello che posso fare, se non altro, per risolvere il problema?

Grazie in anticipo!

Answer 1

Se si consulta lo release notes, verrà visualizzata una spiegazione completa di tutto ciò che è cambiato tra la versione finale di 2.x (2.10.3) e la versione più recente, 3.2.7. In particolare, dalla versione 3.2.2:

Migliore gestione dei movimenti di trascinamento in d3.behavior.drag, d3.behavior.zoom e d3.svg.brush da non impedire comportamenti predefiniti o fermare propagazione. Ad esempio, mousedown ora cambia focus, mouseup all'esterno di un iframe funziona correttamente e il touchstart non balbetta.

Quindi, in V2, il comportamento di trascinamento potrebbe avere la priorità sul comportamento dello zoom interrompendo la propagazione sugli eventi di zoom. In V3, questo non avviene più automaticamente, dandoti la possibilità di scegliere quale comportamento ha la priorità e quando.

Se si desidera dare la priorità comportamento di trascinamento durante il trascinamento nodi, allora avete bisogno di stopPropagation su eventi di input mentre si trascina in modo che questi eventi non sono simultaneamente interpretati come panning dal comportamento dello zoom. Fermandosi propagazione dragstart è sufficiente:

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

Se si utilizza un layout forza, il codice è:

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

esempio di funzionamento:

Nota: combinare questi due comportamenti mezzi quell'interpretazione del gesto è ambigua e molto sensibile alla posizione. Un clic su un cerchio viene interpretato come trascinando quel cerchio, mentre un clic di un pixel di distanza potrebbe essere interpretato come lo sfioramento dello sfondo. Un metodo più robusto per combinare questi comportamenti è utilizzare la modalità.Ad esempio, se l'utente tiene premuto il tasto SPACE, facendo clic e trascinando viene interpretato come panning, anziché trascinare, indipendentemente dalla posizione del clic. Questo approccio è comunemente utilizzato in software commerciali come Adobe Photoshop.