Kann Property Error nicht lesen mit d3.js

Ich habe versucht, eine Parse-Struktur von einem Python-Skript generiert über HTML und d3.js zu visualisieren. Das Python-Skript erzeugt ein HMTL-Dokument, das wie folgt aussehen:Kann Property Error nicht lesen mit d3.js

<!DOCTYPE html> 
<meta charset="utf-8"> 
<head><title> Tree Visualization </title></head> 

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

<body onLoad="drawTree({divID: \'viz\', width: 600, height: 400, padding: 50, treeData: treeData})"> 
<div id="viz"></div> 
</body> 
</html>

Wo js ist die Javascript-Code zu tun, die d3 Sachen

function drawTree(o) { 
    d3.select("#"+o.divID).select("svg").remove() 

    var viz = d3.select("#"+o.divID) 
       .append("svg") 
       .attr("width", o.width) 
       .attr("height", o.height) 

    var vis = viz 
       .append("g") 
       .attr("id","treeg") 
       .attr("transform", "translate("+ o.padding +","+ o.padding +")"); 

    var tree = d3.layout.tree() 
       .size([o.width - (2 * o.padding), o.height - (2 * o.padding)]); 

    var diagonal = d3.svg.diagonal() 
        .projection(function(d) { return [d.x, d.y]; }); 

    var nodes = tree.nodes(o.treeData); 

    var link = vis.selectAll("pathlink") 
       .data(tree.links(nodes)) 
       .enter() 
       .append("path") 
       .attr("class", "link") 
       .attr("d", diagonal) 

    var node = vis.selectAll("g.node") 
       .data(nodes) 
       .enter() 
       .append("g") 
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) 

    node.append("circle") 
     .attr("r", 10) 
     .style("fill", function(d) { return (d.children) ? "#E14B3B" : "#1C8B98" }); 

    node.append("svg:text") 
     .attr("dx", function(d) { return d.children ? 0 : 0; }) 
     .attr("dy", function(d) { return d.children ? 5 : 5; }) 
     .attr("text-anchor", function(d) { return d.children ? "middle" : "middle"; }) 
     .style("fill", "white") 
     .text(function(d) { return d.name; }); 
}

und treeData eine JSON wie Darstellung des Baumes ist.

Was ich jetzt bekomme ist der Fehler Cannot read property 'tree' of undefined im js Teil, in der var tree = ... Zeile. Höchstwahrscheinlich bin ich nur blind und du wirst sofort sehen, was ich falsch gemacht habe, aber ich habe das schon eine ganze Weile lang angestarrt ...

Vielen Dank im Voraus für jede Hilfe!

Quelle

2016-07-01 Domenic Quirl

d3js v4 verwendet d3.layout.tree nicht mehr. Verwenden Sie stattdessen wie folgt

var tree = d3.layout.tree(); //v3 

var tree = d3.tree(); //v4

Überprüfen Sie die changelog für die Unterschiede:

d3.layout.tree ↦ d3.tree

Quelle

2016-07-20 11:01:48

Es kann die Version von d3, die Sie verwenden, ich sehe, Sie laden:

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

es der Fall sein kann, in v4 ist nicht dort d3.layout.tree() Objekt, das. Versuchen Sie, andere Version wechseln, kann dies ein:

<script src="http://d3js.org/d3.v3.min.js"></script>

Da der Fehler sagt, kann es sein, dass d3.layout nicht definiert ist oder d3.layout.tree() ist nicht definiert.

Quelle

2016-07-01 21:47:51 Ajit

Nun, wie ich schon vermutet, es ist nur Ich bin ein Idiot. Mit der richtigen Versionsnummer wurde es repariert, danke! –

@DomenicQuirl Warum kannst du es dir selbst vorwerfen oder deine Version auf v3 herunterstufen? D3 v4 bietet auch ein Baum-Layout, das von v3 auf v4 umbenannt wurde. Überprüfen Sie die [Antwort] (http://Stackoverflow.com/a/38479454/4235784) von M.Kumaran, der es absolut richtig gemacht hat. – altocumulus

Kann Property Error nicht lesen mit d3.js

Antwort

Verwandte Themen