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"}
]
}
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:
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?
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