树图，在D3.js x和y属性来自哪里？

Question

这是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和y属性：

我的json文件就是这样：

这两个属性来自哪里？

Answer 1

这是因为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()做什么？根据{{​​3}}：

  

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

     

  
• parent - 父节点，或root的null。
  
• children - 子节点数组，或叶节点为null。
  
• depth - 节点的深度，从0开始。
  
• x - 节点位置的计算x坐标。
  
• y - 节点位置的计算y坐标。
  

     

（强调我的）

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

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