Невозможно прочитать ошибку свойства с помощью d3.js

Я пытался визуализировать дерево анализа, сгенерированное скриптом Python, через HTML и d3.js. Python скрипт генерирует документ HMTL, который выглядит следующим образом:Невозможно прочитать ошибку свойства с помощью 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>

Где js это код Javascript делает d3 материал

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; }); 
}

и treeData является JSON, как представление дерева.

Что я сейчас получу, это ошибка Cannot read property 'tree' of undefined в части js, в линии var tree = .... Скорее всего, я просто слепой, и вы сразу увидите, что я сделал не так, но я смотрел на это какое-то время ...

Заранее благодарим за любую помощь!

источник

2016-07-01 Domenic Quirl

d3js v4 не использует d3.layout.tree. Вместо того, чтобы использовать как следующий

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

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

Проверьте changelog различий:

d3.layout.tree ↦ d3.tree

источник

2016-07-20 11:01:48

Это может быть версия d3 вы используете, я вижу, вы загружаете:

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

Это может быть так, что в v4 нет d3.layout.tree() объекта. Попробуйте переключиться на другую версию, может быть это один:

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

Как говорит ошибка, может быть, что d3.layout не определено или d3.layout.tree() не определено.

источник

2016-07-01 21:47:51 Ajit

Ну, как я подозревал, уже это просто я был идиотом. Используя правильный номер версии, исправьте его, спасибо! –

@ DomenicQuirl Зачем винить его в себе или понизить версию до версии 3? D3 v4 также предоставляет макет дерева, который получил переименование с v3 на v4. Проверьте [ответ] (http://stackoverflow.com/a/38479454/4235784) М. Кумарана, который получил это абсолютно правильно. – altocumulus

Невозможно прочитать ошибку свойства с помощью d3.js

ответ

Смежные вопросы