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; });

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

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

2 个答案: