D3.js - Czy jest możliwe animowanie pomiędzy wykresem wymuszonym a drzewem węzłów?

używam biblioteki D3.js i patrząc na siły skierowane wykresu Demo:D3.js - Czy jest możliwe animowanie pomiędzy wykresem wymuszonym a drzewem węzłów?

http://mbostock.github.com/d3/ex/force.html

enter image description here

Ja również patrząc na drzewa węzeł-Link:

http://mbostock.github.com/d3/ex/tree.html

enter image description here

Co chciałbym zrobić, to:

- Start z wykresu siły skierowanej a gdy użytkownik kliknie na węźle mają to animowany płynnie na drzewie, z wybranego węzła w centrum. - Następnie, gdy użytkownik kliknie dowolne puste miejsce na płótnie, należy je przywrócić do wykresu skierowanego na siłę.

Czy ktoś wcześniej coś takiego robił, czy ma jakieś porady dotyczące najlepszego podejścia do podjęcia? Jestem nowy w D3.js i nie mam pojęcia, czy jest to obsługiwane przez framework.

Źródło

2012-01-24 Kevin Marzec

Po odbiciu zauważyłem, że nie chcę konkretnie zmieniać grafu skierowanego na siłę w drzewo - chcę zmienić położenie węzłów tak, aby wybrany węzeł był wyśrodkowany, a jego połączenia były rozmieszczone wokół niego, i ich połączenia wokół nich, i tak dalej. Co myślę, że chcę zrobić, to jawnie ustawić wszystkie współrzędne węzłów i długości łączy i utrzymać je na stałe. –

Nie jestem pewien, czy rozumiem zamiar tutaj. Posiadanie "powiązań wokół niego i ich połączeń wokół nich", gdy nie mamy do czynienia z hierarchiczną strukturą, jest dokładnie tym, co układ kierowany siłą. Czy wszystkie węzły i linki będą nadal widoczne po kliknięciu? – nrabinowitz

Prawdopodobnie mógłbyś mieć niewidoczny węzeł z ustaloną pozycją w środku; i ilekroć użytkownik wybierze węzeł - dodajesz link (z siłą znacznie większą niż inne siły) pomiędzy nim (niewidoczny środek) a wyborem.(także, gdy użytkownik wybierze nowy węzeł - poprzednie łącze musi zostać usunięte) – alm

Należy zatrzymać działanie siły i zastosować transformację istniejących węzłów do x-y pochodzących z innego układu. Więc funkcja będzie wyglądać następująco:

force.stop(); 
d3.selectAll("g.nodes").transtion().duration(500) 
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")"

Następnie iterację swojej tablicy węzłów i ustawić x, y, px, py wartości w celu odzwierciedlenia nowego X i Y. Spowoduje to ustawienie węzły znać aktualny x i y pozycję dla układu sił po uruchomieniu force.start()

Można przyjrzeć się funkcji plotLayout() w poniższym przykładzie:

https://gist.github.com/emeeks/4588962

nie polegać na drugim d3.layout. Problem, który napotkasz, polega na tym, że potrzebujesz hierarchicznego zbioru danych dla układu drzewa, który wymaga przekształcenia danych węzłów i krawędzi w tablicę węzłów.children zgodnie z oczekiwaniami w układach hierarchicznych. Sposób, w jaki bym to zrobił, to duplikowanie zbioru danych i ręczne spłaszczenie go, ale może istnieć bardziej eleganckie rozwiązanie, którego nie jestem świadomy.

Źródło

2013-05-06 21:07:26 Elijah

D3.js - Czy jest możliwe animowanie pomiędzy wykresem wymuszonym a drzewem węzłów?

Odpowiedz

Powiązane problemy