D3 - 并非所有子节点都同时显示

Question

我正在尝试基于此 example 创建一个网络图。我尝试使用我拥有的 json 文件，但它不会同时显示所有节点。

{
  "name":"Plant",
  "children":[
    {
      "name":"Delonix regia",
      "children": [
        {
        "id" : "Family",
        "name" : "Fabaceae",
        "size": 10000
        },
        {
        "id" : "Common Name",
        "name" : "Semarak api",
        "size": 10000
        },
        {
        "id" : "Habitat",
        "name" : "Humid",
        "size": 10000
        }
        ]
    },
      {
        "name":"Ixora javanica",
          "children": [
            {
            "id" : "Family",
            "name" : "Fabaceae",
            "size": 10000
            },
            {
            "id" : "Common Name",
            "name" : "Bunga air",
            "size": 10000
            },
            {
            "id" : "Habitat",
            "name" : "Hot",
            "size": 10000
            }
            ]
      },
      {
        "name":"Dracaena reflexa",
          "children": [
            {
            "id" : "Family",
            "name" : "Asparagaceae",
            "size": 10000
            },
            {
            "id" : "Common Name",
            "name" : "Pleomele",
            "size": 10000
            },
            {
            "id" : "Habitat",
            "name" : "Unknown",
            "size": 10000
            }
            ]
      }
    ]
}

这是它的样子。

当我点击其他父节点时 Delonix regia 或 Ixora javanica 另一个打开的节点将关闭。

我还有一个更复杂的 json，但它运行良好，所有节点都在显示。

如何显示所有节点或仅显示父节点？

Answer 1

如果您只是删除 "id": 字段，那么它将起作用。否则，您需要为要显示的每个节点分配唯一 ID。

Answer 2

我更新了示例中提供的代码并添加了您的 json 作为数据源。它工作正常 - https://jsfiddle.net/zLehvLtd/

我在代码中的两个地方用名称替换了 id：

// Update links.
 link = link.data(links, function(d) { return d.target.name; });

// Update nodes.
node = node.data(nodes, function(d) { return d.name; });

创建完整树的其他方法是为 json 中的每个对象添加唯一的 "id"。这背后的原因是 d3.js 接受嵌套格式的 json，每个对象至少有一个唯一的属性。

D3 - 并非所有子节点都同时显示

D3 - not all children nodes are shown at the same time

json

children

nodes

d3.js