d3.js łączące hierarchiczny krawędzi wiązania i Radial Reingold-Tilford Drzewo + danych

Question

chciałbym (rodzaj) łączą Hierarchical Edge Bundling i tym Radial Reingold–Tilford Tree

To będzie wyglądać trochę tak (przepraszam mój straszny paint.net umiejętności) *:

* dzieci powinny znajdować się w łuku, jak na Drzewie.

mam setup to skrzypce, które pokazuje prostych danych w Liście do Hebrajczyków: https://fiddle.jshell.net/d1766z4r/2/

już połączył dwa rodzaje danych (w komentarzach na początku, który zastąpi obecne zmienna „klas”):

var classes = [ 
{"name":"test.cluster1.item1","children": [ 
     {"name": "test.cluster1.item4","imports":["test.cluster1.item2","test.cluster1.item3"]}, 
     {"name": "test.cluster1.item5"} 
    ]}, 
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]}, 
{"name":"test.cluster1.item3"} 
]; 

Jeśli istnieje lepszy sposób łączenia danych, możesz je odpowiednio zmienić.

Inne niż zmiana danych, nie jestem pewien, jak postępować, ponieważ jestem d3.js i początkujący javascript, szczególnie, gdy dojdzie do łączenia odpowiedniego podelementu (pozycja 4), ale nie do drugiego (poz. 5). Zastanowię się jednak nad odpowiedzią, która wskaże link do wszystkich dzieci pozycji 1 jako sposób na rozpoczęcie tego procesu.

Zaktualizuj to skrzypce lub utwórz nowe, jeśli to możliwe, aby cofnąć swój kod. Wszelkie rady dotyczące sposobu postępowania są oczywiście mile widziane.

Następnym krokiem będzie sprawienie, aby te dzieci pokazywały lub chowały się po kliknięciu, używając metody podobnej do Collapsible Tree (proszę o radę, ale prawdopodobnie będzie to nowe pytanie później, jeśli nie mogę dowiedzieć się, jak to zrobić), ponieważ będę musiał pracować z dużą ilością danych, uzasadniając przede wszystkim dzieci.

Wreszcie, każde dziecko może mieć własne dzieci, ale na razie wystarczy jedna linia dzieci. Dojdę do tego później, jak sądzę.

AKTUALIZACJA: Odpowiedzi nie muszą być kompletnymi rozwiązaniami, co nieco (zobacz co tam zrobiłem?) Pomaga!

Answer 1

Być może zupełnie nie rozumiem, o co pytasz, proszę wyjaśnić, czy tak jest.

TL; DR: Here to sposób, w jaki wygląda, w oparciu o to, co zinterpretowałem na podstawie pytania. Dodano więcej danych do testowania.

Hierarchiczne zagnieżdżanie krawędzi zapewnia sposób wizualizacji niehierarchicznych krawędzi na wykresie. Oto link do papieru, który jest zaimplementowany w d3, jeśli nie znalazłeś.

w węzłach example tylko liści przedstawiono filtrując inne węzły:

node = node 
     .data(nodes.filter(function(n) { return !n.children; })) 
    .enter().append("text") 
     .attr("class", "node")... 

hierarchiczne stosunki w tym przykładzie są przedstawione przez kropki w nazwach tak cluster1 jest dominującym Element 1, ITEM2 i ITEM3. Here to sposób, w jaki usuwamy filtr podczas dołączania węzłów.

Moja interpretacja twojego pytania polega na tym, że chcesz użyć hierarchicznego scalania krawędzi do wizualizacji niehierarchicznych relacji (reprezentowanych przez import w tym przykładzie) i "Radial Reingold-Tilford" dla relacji hierarchicznych.

Oto jak można to zrobić:

Format danych trzeba nie zmianę do tego, co zostało zaproponowane. Poniżej powinno być w porządku:

var classes = [ 
     { 
      "name": "test.cluster1.item1.item4", 
      "imports": ["test.cluster1.item2", "test.cluster1.item3"] 
     }, 
     { 
      "name": "test.cluster1.item1.item5", 
      "imports": [] 
     } 
] 

Przyjęcie packageImports funkcjonować dostać hierarchicznych krawędzie z węzłami:

nodes.forEach(function (d) { 
      if(d.children && d.name !== "") d.children.forEach(function (i) { 
       imports.push({ 
        source: map[d.name], 
        target: i 
       }); 
      }); 
     }); 

dodać promieniowy generator przekątnej od Radial Reingold–Tilford example:

var diagonal = d3.svg.diagonal.radial() 
       .projection(
         function(d) { 
          debugger; 
          return [d.y, d.x/180 * Math.PI]; 
         } 
       ); 

Dołącz hierarchiczne krawędzie ścieżek:

treeLink = treeLink 
      .data(getHeirarchialEdges(nodes)) 
      .enter().append("path") 
      .attr("class", "tree-link") 
      .attr("d", diagonal); 

Dodałem także funkcje mouseover i mouseout, aby podświetlić hierarchiczne węzły, spróbuj najechać na dowolny węzeł nadrzędny.