使用节点和边缘数组创建d3-层次结构

Question

如果我想用d3层次来创建一棵树，我就必须使用d3-传家宝，因为我所使用的库使用了这个结构。我正在使用的API返回一个响应如下：

{
"Nodes": [
    {
        "Name": "node-1",
        "Type": "Model"
    },
    {
        "Name": "node-2",
        "Type": "Job"
    },
    {
        "Name": "node-3",
        "Type": "Data"
    },
    {
        "Name": "node-4",
        "Type": "Data"
    },
],
"Edges": [
    {
        "Source": "node-4",
        "Destination": "node-2"
    },
    {
        "Source": "node-3",
        "Destination": "node-2"
    },
    {
        "Source": "node-2",
        "Destination": "node-1"
    },
]}

我试图获得如下输出，可以与d3层次结构一起使用：

[
 {
   Name: 'node-1',
   Type: 'Model',
   children: [
       {
         Name: 'node-2',
         Type: 'Job',
         children: [
             {
                 Name: 'node-3',
                 Type: 'Data'
             },
             {
                 Name: 'node-4',
                 Type: 'Data'
             },
         ]
       },
   ]
 }
]

任何帮助都将不胜感激！

Answer 1

因此，为了便于访问，我首先按节点名称分组。然后构建连接(作为父级子连接)。就这样。我有图表和所有可能的入口点。我选择第一个，因为它有希望是树的根。

​

var input={Nodes:[{Name:"node-1",Type:"Model"},{Name:"node-2",Type:"Job"},{Name:"node-3",Type:"Data"},{Name:"node-4",Type:"Data"},],Edges:[{Source:"node-4",Destination:"node-2"},{Source:"node-3",Destination:"node-2"},{Source:"node-2",Destination:"node-1"},]}

// first obj of nodes grouped by name
var obj_nodes = input.Nodes.reduce(function(agg, item) {
  agg[item.Name] = { ...item, children: [] };
  return agg;
}, {})
// console.log(obj_nodes)

// connecting edges (child parent relations)
input.Edges.forEach(function(item) {
  var source = obj_nodes[item.Source];
  var destination = obj_nodes[item.Destination];
  destination.children.push(source);
}, {})

var trees = Object.values(obj_nodes);

var result = trees[0]
console.log(result)

.as-console-wrapper {max-height: 100% !important}

​