树图，在D3.js x和y属性来自哪里？ [英] Tree graph, in D3.js Where does x and y property came from?

问题描述

这是JavaScript代码：

This is the JavaScript code:

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 属性：

When I log the nodes and links, it says there are x and y properties:

我的json文件就是这样：

And my json file is just this:

这两个属性来自哪里？

推荐答案

这是b因为 d3.layout.cluster（）。

在您的代码中，之前 d3.json 函数，你可能有这样的东西：

In your code, before that d3.json function, you probably have something like this:

var cluster = d3.layout.cluster();

然后，当你这样做时：

var nodes = cluster.nodes(root);
var links = cluster.links(nodes);

您正在调用 d3.layout.cluster（）超过你的数据。

You're calling d3.layout.cluster() over your data.

d3.layout.cluster（）是做什么的？根据 API ：

What does d3.layout.cluster() do? According to the API:

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

• parent - 父节点，或root为null。 / li>
  
• children - 子节点数组，或叶节点为null。


• depth - 节点的深度，从0开始为根节点。


• x - 节点位置的计算x坐标。


• y - 节点位置的计算y坐标。

• parent - the parent node, or null for the root.
• children - the array of child nodes, or null for leaf nodes.
• depth - the depth of the node, starting at 0 for the root.
• x - the computed x-coordinate of the node position.
• y - the computed y-coordinate of the node position.

（强调我的）

这就是起源您的数据中的新 x 和 y 属性以及其他属性（您可以看到<$ c $截图中的c>深度。

And that's the origin of the new x and y properties in your data, as well as other properties (you can see depth in your screenshot).

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

PS: This is D3 v3.x. In D3 v4, d3.layout.cluster() has been changed, it's now d3.cluster().

这篇关于树图，在D3.js x和y属性来自哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！