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

【问题标题】：Cannot read property error using d3.js无法使用 d3.js 读取属性错误
【发布时间】：2016-11-04 08:40:59
【问题描述】：

我一直在尝试通过 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 的树表示。

我现在得到的是js 部分中的错误Cannot read property 'tree' of undefinedvar tree = ... 行。很可能我只是个盲人，你会立即看到我做错了什么，但我已经盯着这个看了一段时间了......

提前感谢您的帮助！

【问题讨论】：

标签： javascript python html d3.js

【解决方案1】：

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

【讨论】：

好吧，我已经怀疑这只是我是个白痴。使用正确的版本号确实可以解决问题，谢谢！
@DomenicQuirl 为什么要责怪自己或将您的版本降级到 v3？ D3 v4 还提供了从 v3 重命名为 v4 的树形布局。检查 M.Kumaran 的 answer，他完全正确。

【解决方案2】：

d3js v4 不再使用d3.layout.tree。而是像下面这样使用

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

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

检查changelog 的差异：

d3.layout.tree ↦ d3.tree

【讨论】：