Dlaczego d3.js v3 złamać mój wykres siły podczas wdrażania powiększania, gdy v2 nie?

Question

Dlaczego d3.js v3 złamać mój wykres siły podczas wdrażania powiększania, gdy v2 nie?

Mam układ sił, który stworzyłem za pomocą d3.js

Chciałbym mieć zarówno normalną funkcjonalność układu siły przeciągania, jak i możliwość powiększania.

W zasadzie skopiowałem/wkleiłem kod powiększenia z ( http://jsfiddle.net/nrabinowitz/QMKm3 / ). jest to ten sam sposób powiększania, którego używa Mike Bostock w ( http://bl.ocks.org/mbostock/3680957).

Oto Mój kod: http://jsfiddle.net/kM4Hs/6/

Powiększenie działa dobrze, ale nie jestem w stanie wybrać pojedynczych węzłów w układzie siły i przeciągnąć je wokół.

Uznałem, że winowajcą jest fakt, że obaj autorzy używają d3.v2.js zamiast nowszego d3.v3.js. Po zmianie importu do v2 Działa idealnie. Chciałbym jednak użyć v3, jeśli to możliwe.

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

Kontra

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

Dlaczego v3 łamie układ siły, gdy v2 nie, i co ważniejsze, co mogę zrobić, aby naprawić?

Z góry dzięki!

37

javascript svg d3.js force-layout

Author: Max Shvartsman, 2013-07-30

Source

1 answers

score 81 · Accepted Answer

Jeśli zapoznasz się z notatkami do wydania , zobaczysz pełne wyjaśnienie wszystkiego, co zmieniło się między finalnym wydaniem 2.x (2.10.3) oraz najnowsze wydanie, 3.2.7. W szczególności od wydania 3.2.2:

Lepsza obsługa gestów przeciągania w d3.zachowanie.drag, d3.zachowanie.zoom i d3.svg.pędzel, nie zapobiegając domyślnym zachowaniom ani nie zatrzymując propagacji. Na przykład mousedown zmienia ostrość, mouseup poza ramką iframe działa poprawnie, a touchstart nie jąkanie.

Tak więc w wersji 2 zachowanie przeciągania może mieć pierwszeństwo przed zachowaniem powiększania, zatrzymując propagację przy zdarzeniach powiększania. W wersji 3 nie dzieje się to już automatycznie, co daje Ci wybór, które zachowanie ma pierwszeństwo i kiedy.

Jeśli chcesz nadać priorytet zachowania przeciągania podczas przeciągania węzłów, to musisz zatrzymać przy zdarzeniach wejściowych podczas przeciągania, aby zdarzenia te nie były jednocześnie interpretowane jako panoramowanie przez powiększenie zachowanie. Zatrzymanie propagacji na dragstarcie jest wystarczające:

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

W przypadku użycia układu siłowego kod jest następujący:

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

Przykład roboczy:

Uwaga: połączenie tych dwóch zachowań oznacza, że interpretacja gestów jest niejednoznaczna i bardzo wrażliwa na położenie. Kliknięcie na okręgu jest interpretowane jako przeciągnięcie tego okręgu, podczas gdy kliknięcie o jeden piksel dalej może być interpretowane jako przesuwanie tła. Bardziej solidną metodą łączenia tych zachowań jest aby wykorzystać modalność. Na przykład, jeśli użytkownik przytrzyma klawisz spacji, kliknięcie i przeciąganie jest interpretowane jako przesuwanie, a nie przeciąganie, niezależnie od lokalizacji kliknięcia. Takie podejście jest powszechnie stosowane w oprogramowaniu komercyjnym, takim jak Adobe Photoshop.