无法使用 d3.js 读取属性错误
Posted
技术标签:
【中文标题】无法使用 d3.js 读取属性错误【英文标题】：Cannot read property error using 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 = ... 行。很可能我只是个盲人，你会立即看到我做错了什么，但我已经盯着这个看了一段时间了......
提前感谢您的帮助！
【问题讨论】：
【参考方案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
【讨论】：
以上是关于无法使用 d3.js 读取属性错误的主要内容，如果未能解决你的问题，请参考以下文章
如何使用自定义错误消息捕获“TypeError：无法读取未定义的属性（读取'0'）”？