Question

我正在研究一个d3项目，我正在尝试绘制一个层次结构树来向人们展示他们负责的人。基本上我可以使用A和用户B，他们每个人都可以对同一个人负责。

目前要在构建我可重复数据的可视化的JSON数据中突出显示这一点，当有2个或更多人负责同一个人时，是否可以不重复数据并使用相同的数据点？

这是我的JSfiddle示例

你会在这里看到，Raymond Reddington＆amp;唐纳德·雷斯勒（Donald Ressler）在他们的一些责任之间交叉，我正在重复看似效率低下的数据，有更好的方法，这是我的JSON。

[
{
    "name" : "Company Name",
    "parent" : null,
    "children": [
        {
            "name" : "Raymond Reddington",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Debe Zuma",
                    "parent" : "Raymond Reddington",
                },
                {
                    "name" : "Tom Keen",
                    "parent" : "Raymond Reddington",
                },
                {
                    "name" : "Aram Mojtabai",
                    "parent" : "Raymond Reddington",
                }
            ]
        },
        {
            "name" : "Elizabeth Keen",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Samar Navabi",
                    "parent" : "Elizabeth Keen",
                },
                {
                    "name" : "Meera Malik",
                    "parent" : "Elizabeth Keen",
                },
                {
                    "name" : "Mr. Kaplan",
                    "parent" : "Elizabeth Keen",
                },
                {
                    "name" : "Reven Wright",
                    "parent" : "Elizabeth Keen",
                }
            ]
        },
        {
            "name" : "Donald Ressler",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Matius Solomon",
                    "parent" : "Donald Ressler",
                    "size" : 3938
                },
                {
                    "name" : "Peter Kotsiopulos",
                    "parent" : "Donal Ressler",
                    "size" : 3938
                },
                {
                    "name" : "Tom Keen",
                    "parent" : "Raymond Reddington",
                    "size" : 3938
                },
                {
                    "name" : "Aram Mojtabai",
                    "parent" : "Raymond Reddington",
                    "size" : 3938
                }
            ]
        },
        {
            "name" : "Harold Cooper",
            "parent" : "Cherry Tree Lodge",
            "children" : [
                {
                    "name" : "Samar Navabi",
                    "parent" : "Elizabeth Keen",
                    "size" : 3938
                },
                {
                    "name" : "Meera Malik",
                    "parent" : "Elizabeth Keen",
                    "size" : 3938
                }
            ]
        }
    ]
}

Answer 1

本网站详细介绍了将平面数据转换为d3 this post

所需的分层数据的方法

他们也很好地解释了。正如作者所说，它最初基于http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html

我复制并粘贴了他们网站的示例：

var data = [
    { "name" : "Level 2: A", "parent":"Top Level" },
    { "name" : "Top Level", "parent":"null" },
    { "name" : "Son of A", "parent":"Level 2: A" },
    { "name" : "Daughter of A", "parent":"Level 2: A" },
    { "name" : "Level 2: B", "parent":"Top Level" }
    ];

将映射到：

var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ]
  }
];

通过：

var dataMap = data.reduce(function(map, node) {
 map[node.name] = node;
 return map;
}, {});

var treeData = [];
data.forEach(function(node) {
 // add to parent
 var parent = dataMap[node.parent];
 if (parent) {
  // create child array if it doesn't exist
  (parent.children || (parent.children = []))
   // add node to child array
   .push(node);
 } else {
  // parent is null or missing
  treeData.push(node);
 }
});

您可以进一步扩展以替换Ids并使用第二个规范化数组进行查找：

[{
  "id": 0,
  "name": "Cherry Tree Lodge"
},{
  "id": 1,
  "name": "Tom Keen"
},{
  "id": 2,
  "name": "Debe Zuma"
}]

另请注意，您的json数据并非严格有效，您还有额外的逗号。

节点之间的D3树/层次结构相关数据

1 个答案: