D3.js 中的树形图 x 和 y 属性从何而来？

这是 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")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("d", diagonal);

当我记录节点和链接时，它说有x and 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()做？根据API https://github.com/d3/d3-3.x-api-reference/blob/master/Cluster-Layout.md:

这些布局遵循相同的基本结构：布局的输入参数是层次结构的根节点，输出返回值是一个表示所有节点的计算位置的数组。几个属性填充在每个节点上：

• Parent - 父节点，或者根节点为 null。
• Children - 子节点数组，或叶节点为 null。
• 深度 - 节点的深度，从 0 开始作为根。
• x - 计算出的节点位置的 x 坐标。
• y - 计算出的节点位置的 y 坐标。

（强调我的）

这就是新的起源x and y数据中的属性以及其他属性（您可以看到depth在你的屏幕截图中）。

PS：这是 D3 v3.x。在 D3 v4 中，d3.layout.cluster()已经改变了，现在是d3.cluster().