javascript - 在 d3v4 中使用 d3.tree() 构建树时遇到问题
问题描述
我对 d3 库很陌生,我一直在尝试使用该tree()
函数构造一棵树。
我一尝试创建树就会遇到错误:
var tree = d3.tree()
.size([2 * Math.PI, 500])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var root = tree(buildTree(jsonObj));
似乎是给我的错误,从 chrome 的控制台显示:
Uncaught TypeError: Cannot read property 'z' of undefined
at firstWalk (d3.v4.js:10665)
at TreeNode.node_eachAfter [as eachAfter] (d3.v4.js:9876)
at tree (d3.v4.js:10625)
at HTMLInputElement.<anonymous> (better_radial_tree.html:86)
所做buildTree
的只是返回具有 . children[]
,还有其他孩子,等等。奇怪的是,我使用 d3.layout.tree 构建一个没有问题,但这似乎在 d3.v4 中不起作用。我试图从中构造树的对象遵循以下布局:
.name
带有、.type
和的节点对象.children[Node]
。
任何想法为什么这不起作用?children
除了我需要添加到对象之外,还有其他属性吗?任何帮助将不胜感激。
我使用 Mike Bostock 的 Radial Tidy Tree 块 ( https://bl.ocks.org/mbostock/4063550 ) 作为基础。其余代码如下:
var link = g.selectAll(".link")
.data(root.links())
.enter().append("path")
.attr("class", "link")
.attr("d", d3.linkRadial()
.angle(function(d) { return d.x; })
.radius(function(d) { return d.y; }));
var node = g.selectAll(".node")
.data(root.descendants())
.enter().append("g")
.attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
.attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; });
node.append("circle")
.attr("r", 2.5);
node.append("text")
.attr("dy", "0.31em")
.attr("x", function(d) { return d.x < Math.PI === !d.children ? 6 : -6; })
.attr("text-anchor", function(d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
.attr("transform", function(d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
.text(function(d) { return "test"; });
function radialPoint(x, y) {
return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
}
解决方案
在将我的数据传递到树之前必须计算分层布局。
var root = tree(d3.hierarchy(buildTree(jsonObj)));
推荐阅读
- python - glob.glob 在读取多个 csv 文件时返回一个空列表
- typescript - 实现 webview 和处理回调
- domain-driven-design - XML 生成器类的 DDD 组件
- laravel - 如何使用租赁 laravel 从存储文件夹中获取图像
- javascript - 这个 jQuery 的 JavaScript 等价物是什么?
- r - 根据data.table中一列的值更改多列的值
- android - 如何在按下回车键时使多行属性为假?
- r - 如何使用 VBA 创建子集并为每个子集计算回归
- c++ - 将十六进制转换为二进制函数添加额外的值
- json - 我可以为 package.json 编写 eslint 规则吗?