Question

我一直试图通过HTML和d3.js可视化Python脚本生成的解析树。 Python脚本生成一个如下所示的HMTL文档：

<!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是执行d3内容的Javascript代码

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 = ...。我很可能只是失明，你会立即看到我做错了什么，但我现在已经盯着这一段了......

提前感谢您的帮助！

Answer 1

d3js v4不再使用"15-Jul-16 04:30"。而是使用如下

"15-Jul-16"

检查changelog的差异：

d3.layout.tree↦d3.tree

Answer 2

它可能是您正在使用的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()未定义。

使用d3.js无法读取属性错误

2 个答案: