2012-10-03 28 views
5

Chciałbym wygenerować hierarchiczny diagram wymuszania za pomocą D3.js - wykres ukierunkowany na siłę, który pozwala poruszać się po strukturze drzewa, klikając węzły rozszerzające wykres na poziom dzieci (gdzie pokazano relacje między dziećmi). Węzły mogą być ze sobą powiązane na dwa sposoby - rodzica lub rodzeństwo. Relacja nadrzędna wskazuje, że węzły "należą do" ich rodzica.Hierarchiczny diagram wymuszania za pomocą D3.js

Jako punkt wyjścia przyjrzałem się przykładowi klastra sił: https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html i uwzględniono powyższe relacje, ale nie mogę wymyślić, jak renderować tylko rozwinięty klaster, a nie całą sieć (patrz obrazek poniżej).

JSON data: 
{"nodes": 
     [ 
     {"name":"Person 0","group":"Person 0"}, 
     {"name":"Person 1","group":"Person 1"}, 
     {"name":"Person 2","group":"Person 1"}, 
     {"name":"Person 3","group":"Person 1"},  
     {"name":"Person 4","group":"Person 3"}, 
     {"name":"Person 5","group":"Person 3"} 
     ], 
"links": 
     [ 
     {"source":1,"target":0,"type":"sibling"}, 
     {"source":2,"target":1,"type":"parent"}, 
     {"source":3,"target":1,"type":"parent"}, 
     {"source":3,"target":2,"type":"sibling"}, 
     {"source":4,"target":3,"type":"parent"}, 
     {"source":5,"target":3,"type":"parent"}, 
     {"source":4,"target":5,"type":"sibling"} 
     ] 
} 

Expanding cluster

Powyżej: Siły schemacie, gdzie czerwone linki wskazania relacji rodzeństwa.

Byłoby również możliwość zorganizowania „dzieci” jak dzieci w JSON, zamiast korzystania z rodzicem „type”:

{ 
"nodes": [ 
    { 
     "name": "Person 0", 
    }, 
    { 
     "name": "Person 1", 
     "children": [ 
      { 
       "name": "Person 2", 
      }, 
      { 
. 
. 
. 
"links": [ 
    { 
     "source": 1, 
     "target": 0 
    }, 
. 
. 

Jednak, jak można następnie połączyć drzewami strukturę utrzymując śledzenie relacji między węzłami podrzędnymi?

Pomysłowe struktury drzewiastej wyglądałby następująco: Tree

Dolny odcinek oznacza odpowiedni układ wizualnej (podobnej funkcji w jednym z górnym rysunku).

Czy mają Państwo jakieś sugestie dotyczące postępowania?

+0

Miałem podobny problem. Chciałem pokazać sieć lokalną wokół węzła, który został kliknięty z dużego zestawu danych. Moje rozwiązanie może dostarczyć ci kilku wskazówek: timebandit.github.io/graphSub – timebandit

Odpowiedz

0

Niejawnie wszystkie węzły z tym samym bezpośrednim rodzicem są rodzeństwem. Dlatego nie musisz dodatkowo śledzić, czy węzły są rodzeństwem, czy też nie.

Jeśli masz węzły, które są powiązane tylko z innymi węzłami siostrzanymi, ale nie masz rodzica (np. Relacja między osobą 0 i osobą 1 w twoim przykładzie), układ drzewa nie jest właściwym wyborem. Zamiast tego możesz wypróbować układ sił.