Wie definiert man die Eltern-Kind-Beziehung in D3?

Question

In der folgenden JSON-Datei ist id die Id-Nummer, lv ist die Ebene und pid ist die übergeordnete ID-Nummer dieser Aufzeichnung. Wie kann ich die Eltern-Kind-Knotenbeziehung erstellen, um eine Partition in D3.js zu zeichnen?

ich bereits JSON-Datei in ein Array von d3.json und data.map Funktionen ..

[ 
    { 
     "id": 1, 
     "nam": "Ph", 
     "lv": 1, 
     "pid": 0 
    }, 
    { 
     "id":2, 
     "nam":"Pa", 
     "lv1":2, 
     "pid":1 
    }, 
    ... 
] 

Answer 1

Um die Eltern-Kinder-Beziehung zu definieren, müssen Sie d3.stratify() umgewandelt habe.

So gegeben, Ihre Datenstruktur, das ist, wie Sie Ihre stratify Funktion sein sollte:

var stratify = d3.stratify() 
    .id(function(d) { return d.id; }) 
    .parentId(function(d) { return d.pid; }); 

Die Funktion ist recht einfach zu verwenden: in id Sie die ID jedes Knotens gesetzt, und in parentId Sie setzen die Eltern-ID jedes Knotens (in Ihrem Fall id bzw. pid).

prüft diese Demo:

var data = [{"id": 1, "nam": "Ph", "lv": 1, "pid": ""}, 
 
    {"id":2, "nam":"Pa", "lv1":2, "pid":1}, 
 
\t \t {"id":3, "nam":"Foo", "lv1":2, "pid":1}, 
 
\t \t {"id":4, "nam":"Bar", "lv1":3, "pid":2}]; 
 
\t \t 
 
var stratify = d3.stratify() 
 
    .id(function(d) { return d.id; }) 
 
    .parentId(function(d) { return d.pid; }); 
 
\t \t 
 
var root = stratify(data); 
 

 
console.log(root);

<script src="https://d3js.org/d3.v4.min.js"></script>

PS: der Wurzelknoten keinen Elternteil hat. Entfernen Sie also die 0 im pid des Root-Objekts.