Zoomable Treemap d3.v4

Question

Ich habe die zoombare Treemap-Implementierung erweitert gefunden here, aber habe einige Probleme beim Versuch, es zu aktualisieren, um mit d3 v4 zu arbeiten getroffen. Meine Hierarchie wird als CSV von JSON-Objekten eingelesen. Jedes Objekt ist ein Kurs mit einer entsprechenden Universität und Abteilung.

var data = d3.nest().key(function(d) { return d.university; }).key(function(d) { return d.department; }).entries(res); 

var treemap = d3.treemap() 
     .children(function(d, depth) { return depth ? null : d._children; }) 
     .sort(function(a, b) { return a.value - b.value; }) 
     .ratio(height/width * 0.5 * (1 + Math.sqrt(5))) 
     .round(false); 

Aber das v4 treemap Objekt keine Kinder() oder Art() -Funktionen. Andere sources schlagen vor, dass sum() und sort() auf den Knoten selbst ausgeführt werden sollten, aber ich kann dies nicht mit den anderen Änderungen an d3 abstimmen.

Kann mir bitte jemand zeigen, wie ich meine Daten in das Treemap-Layout lege?

Answer 1

Nach ein paar Tagen habe ich es endlich herausgefunden. Die Eltern-Kind-Beziehungen müssen explizit über d3.stratify.parentId() definiert werden.

Hier ist eine allgemeine Lösung. Nehmen wir an, die hierarchischen Daten bestehen aus Kursen, die in Abteilungen verschachtelt sind, die in Universitäten verschachtelt sind, die im Stamm verschachtelt sind. Die Daten sollten die Form haben ...

var data = [ {"object_type": "root" , "key":"Curriculum1", "value" : 0.0} , 
{"object_type": "university" , "key": "univ1", "value" : 0.0, 
    curriculum: "Curriculum1" } , 
{"object_type": "department" , "key": "Mathematics", "value": 0.0, "university": "univ1" , 
    curriculum: "Curriculum1"} , 
{"object_type": "course" , "key": "Linear Algebra", "value": 4.0, 
    "department": "Mathematics", "university": "univ1", curriculum: "Curriculum1"} , 
... ] 

Beachten Sie, dass nur die Blätter (Kurse) haben Werte (kann als Kredit Stunden interpretiert werden). Zwischenknoten haben keinen inhärenten Wert in den Rohdaten. Um die Wurzel zu erzeugen und an das treemap Layout passiert, sieht der Code wie ...

var root = d3.stratify() 
    .id((d) => d.key) 
    .parentId(function(d){ 
     if(d.object_type=='root'){ 
     return null; 
     } else if(d.object_type=='university') { 
     return d.curriculum; 
     }else if(d.object_type=='department') { 
     return d.university; 
     } else { 
     return d.department; 
     } 
    }) 
    (data) 
    .sum(function(d) { return d.value; }) 
    .sort(function(a, b) { return a.value - b.value; }); 

    treemap(root);