Javascript 树形图,在D3.js中,x和y属性从何而来?
这是JavaScript代码:Javascript 树形图,在D3.js中,x和y属性从何而来?,javascript,d3.js,Javascript,D3.js,这是JavaScript代码: d3.json("city.json", function (error, root) { var nodes = cluster.nodes(root); var links = cluster.links(nodes); console.log(nodes); console.log(links); var link = gCluster.selectAll(".link")
d3.json("city.json", function (error, root) {
var nodes = cluster.nodes(root);
var links = cluster.links(nodes);
console.log(nodes);
console.log(links);
var link = gCluster.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal);
当我记录节点和链接时,它显示有x
和y
属性:
我的json文件如下所示:
这两处房产从何而来 这是因为
d3.layout.cluster()
在代码中,d3.json
函数之前,您可能有如下内容:
var cluster = d3.layout.cluster();
然后,当您这样做时:
var nodes = cluster.nodes(root);
var links = cluster.links(nodes);
您正在对数据调用d3.layout.cluster()
d3.layout.cluster()做什么?根据报告:
这些布局遵循相同的基本结构:布局的输入参数是层次结构的根节点,输出返回值是表示所有节点的计算位置的数组在每个节点上填充多个属性:
- 父节点-父节点,或根节点为null
- children—子节点数组,叶节点为null
- 深度-节点的深度,从根节点的0开始
- x—节点位置的计算x坐标
- y-节点位置的计算y坐标
(强调矿山)
这就是数据中新的x
和y
属性以及其他属性的来源(您可以在屏幕截图中看到depth
)
PS:这是D3V3.x。在D3 v4中,D3.layout.cluster()
已经更改,现在是D3.cluster()
对不起,它不是。我重新编辑了我的问题并上传了一张图片。我的json文件不包含这样的属性欢迎来到StackOverflow,我看到你是新来的。下次,请发布你的真实代码/数据/日志,而不是截图。这对试图回答你的问题的人来说更容易,因此对你来说更好。对不起,下次我会改变我的方式,谢谢你的帮助