项目中正好碰到，要处理桑基图的相关数据，并且需要进行展示不同节点的深度，这里记录一下自己的处理方法，感觉不是很好，但是也能解决问题吧
const data = [
{ source: 'G9', target: 'CNC', value: 40 },
{ source: 'total', target: '辅助设备', value: 50 },
{ source: 'total', target: 'G9', value: 40 },
{ source: 'total', target: 'G8', value: 20 },
{ source: 'total', target: 'G7', value: 20 },
{ source: 'total', target: 'G6', value: 20 },
{ source: 'total', target: 'G5', value: 80 },
{ source: 'total', target: 'G4', value: 90 },
{ source: 'total', target: 'G3', value: 30 },
{ source: 'total', target: 'G2', value: 60 },
{ source: 'total', target: 'G1', value: 70 },
{ source: '辅助设备', target: '空压', value: 10 },
{ source: '辅助设备', target: '真空机', value: 20 },
{ source: '辅助设备', target: '废气塔', value: 20 },
{ source: 'G7', target: '空调', value: 10 },
{ source: 'G7', target: '阳极', value: 10 },
{ source: 'G8', target: '照明', value: 10 },
{ source: 'G8', target: 'CNC', value: 10 },
{ source: 'G6', target: '组立', value: 20 },
{ source: 'G5', target: '补偿柜', value: 70 },
{ source: 'G4', target: 'CNC', value: 50 },
{ source: 'G4', target: '模具中心', value: 40 },
{ source: 'G3', target: '周边', value: 30 },
{ source: 'G2', target: '备用', value: 60 },
{ source: 'G1', target: '注塑', value: 70 },
{ source: 'G5', target: '喷砂', value: 10 },
]
// 获取所有的节点
let types =[]
data.forEach(val=>{
types.indexOf(val.source)===-1?types.push(val.source):null
types.indexOf(val.target)===-1?types.push(val.target):null
})
// 获取节点层级
const depthMap = {
'total':0
}
while(Object.keys(depthMap).length<types.length){
data.forEach(val=>{
if(depthMap[val.source]!==undefined){
depthMap[val.target] = depthMap[val.source] + 1
}
})
}
console.log(depthMap)
当出现根节点找不到的时候会出现死循环。。。。。
重新修复一个版本，动态获取根节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
const data = [
{ source: "total", target: "辅助设备", value: 50 },
{ source: "total", target: "G9", value: 40 },
{ source: "total", target: "G8", value: 20 },
{ source: "total", target: "G7", value: 20 },
{ source: "total", target: "G6", value: 20 },
{ source: "total", target: "G5", value: 80 },
{ source: "total", target: "G4", value: 90 },
{ source: "total", target: "G3", value: 30 },
{ source: "total", target: "G2", value: 60 },
{ source: "total", target: "G1", value: 70 },
{ source: "辅助设备", target: "空压", value: 10 },
{ source: "辅助设备", target: "真空机", value: 20 },
{ source: "辅助设备", target: "废气塔", value: 20 },
{ source: "G7", target: "空调", value: 10 },
{ source: "G7", target: "阳极", value: 10 },
{ source: "G8", target: "照明", value: 10 },
{ source: "G8", target: "CNC", value: 10 },
{ source: "G9", target: "CNC", value: 40 },
{ source: "G6", target: "组立", value: 20 },
{ source: "G5", target: "补偿柜", value: 70 },
{ source: "G4", target: "CNC", value: 50 },
{ source: "G4", target: "模具中心", value: 40 },
{ source: "G3", target: "周边", value: 30 },
{ source: "G2", target: "备用", value: 60 },
{ source: "G1", target: "注塑", value: 70 },
{ source: "G5", target: "喷砂", value: 10 },
];
// 获取所有的节点
let types = [];
const sources = [];
const targets = [];
data.forEach((val) => {
sources.indexOf(val.source) === -1 ? sources.push(val.source) : null;
targets.indexOf(val.target) === -1 ? targets.push(val.target) : null;
});
//过滤父节点
const father = sources.filter((val) => {
return !targets.includes(val);
});
// 获取节点层级
const depthMap = {
[father[0]]: 0,
};
// 找到父节点
types = [...new Set([...sources, ...targets])];
while (Object.keys(depthMap).length < types.length) {
// console.log(depthMap)
data.forEach((val) => {
if (depthMap[val.source] !== undefined) {
depthMap[val.target] = depthMap[val.source] + 1;
}
});
}
console.log(depthMap);
</script>
</body>
</html>
