嘗試使用 d3-hierachy 創建樹時卡住了，我必須使用 d3-heirachy，因為我正在使用的庫使用該結構。我正在使用的 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-hierarchy 一起使用的如下輸出：
[
{
Name: 'node-1',
Type: 'Model',
children: [
{
Name: 'node-2',
Type: 'Job',
children: [
{
Name: 'node-3',
Type: 'Data'
},
{
Name: 'node-4',
Type: 'Data'
},
]
},
]
}
]
任何幫助將不勝感激！
uj5u.com熱心網友回復：
所以首先我按節點名稱分組以便于訪問。然后我建立連接（作為父子連接）。而已。我有圖表和所有可能的入口點。我選擇第一個，因為它希望是樹的根。
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}轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/506784.html
標籤：javascript d3.js