Wie erstelle ich ein Baum-Layout mit JSON-Daten in d3.v4 - ohne stratify()

Question

Ich versuche, einige d3-Code von v3 auf Version 4 zu aktualisieren. Ich habe ein Baumdiagramm mit JSON-Daten. Die d3.v4-Beispiele zeigen, wie tabellarische Daten (z. B. flare.csv) in hierarchische Daten mithilfe von stratify() https://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04 konvertiert werden. Aber meine Daten sind JSON, also will oder brauche ich stratify() nicht. Ich bekomme diese Fehlermeldung:

undefined is not a function (evaluating 'root.eachBefore')

diesen Code ausgeführt wird:

var height = 200; 
var width = 500; 

var xNudge = 50; 
var yNudge = 20; 

var tree = d3.tree() 
    .size([height, width]); 

var svg = d3.select("body").append("svg").attr("width","100%").attr("height","100%"); 
var chartGroup = svg.append("g").attr("transform","translate(50,200) rotate(-90)"); 

d3.json("treeData.json", function(treeData) { 


    var root = treeData[0]; 
    tree(root); 
    console.log('hello');//doesn't log to console, i.e. error occurs beforehand 
} 

treeData.json:

[ 
    { 
    "name": "Top Level", 
    "parent": "null", 
    "children": [ 
    { 
     "name": "Level 2: A", 
     "parent": "Top Level", 
     "children": [ 
     { 
      "name": "Son of A", 
      "parent": "Level 2: A" 
     }, 
     { 
      "name": "Daughter of A", 
      "parent": "Level 2: A" 
     } 
     ] 
    }, 
    { 
     "name": "Level 2: B", 
     "parent": "Top Level" 
    } 
    ] 
} 
] 

Ist es tatsächlich möglich, ein Baum Layout in d3.v4 zu erstellen, ohne stratify , dh mit Daten, die bereits hierarchisch sind? Kennt jemand ein Beispiel oder kann ich das Problem in meinem Code erkennen? danke

Answer 1

Sie müssen d3.hierarchy auf Ihren Daten ausführen, um es für tree() bereit zu machen. Stratify führt wahrscheinlich eine Hierarchie oder ist in gewisser Weise ähnlich. Ändern Sie die entsprechende Zeile in: var root = d3.hierarchy (treeData [0]);

Answer 2

Ich hatte das gleiche Problem. Emma's response antwortete im Wesentlichen, aber ich hatte immer noch Schwierigkeiten, es richtig funktionieren zu lassen. Ich werde ein wenig weiterarbeiten, für den Fall, dass es jemand hilfreich finden könnte. Ich habe einen Block erstellt, der das Funktionsergebnis here anzeigt, das auf Ihren obigen Beispieldaten Emma's response und this basiert.

Die Antwort ist aus drei Teilen:

• Sie haben Ihr JSON-Objekt in Array Klammern gewickelt. Entweder entferne diese Klammern (wie ich es im gist gemacht habe), oder lege eine [0] am Ende deiner treeData ab (wie Emma es in dem obigen Link getan hat), um das Objekt aus diesem 1-Element Array zu holen.
• Übergeben Sie Ihr JSON-Objekt an d3.hierarchy (wie Emma erklärte).
• Schließlich scheint sich die API für die Benennung der Knoten geändert zu haben, was auch in meinem oben verlinkten Block erledigt wird.

Der Einfachheit halber ist hier der Code von the block I made:

var svg = d3.select("svg"), 
    width = +svg.attr("width"), 
    height = +svg.attr("height"), 
    g = svg.append("g").attr("transform", "translate(60,0)"); 

var tree = d3.cluster() 
    .size([height, width - 160]); 

var stratify = d3.stratify() 
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); }); 

d3.json("treeData.json", function(error, treeData) { 
    if (error) throw error; 

    var root = d3.hierarchy(treeData); 
    tree(root); 

    var link = g.selectAll(".link") 
     .data(root.descendants().slice(1)) 
    .enter().append("path") 
     .attr("class", "link") 
     .attr("d", function(d) { 
     return "M" + d.y + "," + d.x 
      + "C" + (d.parent.y + 100) + "," + d.x 
      + " " + (d.parent.y + 100) + "," + d.parent.x 
      + " " + d.parent.y + "," + d.parent.x; 
     }); 

    var node = g.selectAll(".node") 
     .data(root.descendants()) 
    .enter().append("g") 
     .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) 
     .attr("transform", function(d) { 
     return "translate(" + d.y + "," + d.x + ")"; 
     }) 

    node.append("circle") 
     .attr("r", 2.5); 

    node.append("text") 
     .attr("dy", 3) 
     .attr("x", function(d) { return d.children ? -8 : 8; }) 
     .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) 
     .text(function(d) { 
     return d.data.name; 
     }); 
}); 

und hier ist treeData.json aus dem Array entfernt:

{ 
    "name": "Top Level", 
    "parent": "null", 
    "children": [ 
    { 
     "name": "Level 2: A", 
     "parent": "Top Level", 
     "children": [ 
     { 
      "name": "Son of A", 
      "parent": "Level 2: A" 
     }, 
     { 
      "name": "Daughter of A", 
      "parent": "Level 2: A" 
     } 
     ] 
    }, 
    { 
     "name": "Level 2: B", 
     "parent": "Top Level" 
    } 
    ] 
}