英文:
How to convert Array of hierarchy data into right JSON-Format for D3-Tree-Region
问题
我有问题将层次数据的数组转换为正确的对象格式。
我试图将这个转换为：
但我不知道如何让它工作。我在这个帖子中找到了一段代码，但我不知道如何应用它到我的用例。
有人可以帮助我吗？
我会非常感激任何建议！
谨以问候
Jegor
英文:
i having problems converting an array of hierarchy data into the right Object format.
I trying to convert this:
[
{"PARENT_ID": 0,"CHILD_ID": 1,"NAME": "Quality","LEVEL_A": 0},
{"PARENT_ID": 1,"CHILD_ID": 2,"NAME": "Machine","LEVEL_A": 1},
{"PARENT_ID": 1,"CHILD_ID": 3,"NAME": "Method","LEVEL_A": 1},
{"PARENT_ID": 1,"CHILD_ID": 4,"NAME": "Material","LEVEL_A": 1},
{"PARENT_ID": 1,"CHILD_ID": 5,"NAME": "Man Power","LEVEL_A": 1},
{"PARENT_ID": 1,"CHILD_ID": 6,"NAME": "Measurement","LEVEL_A": 1},
{"PARENT_ID": 1,"CHILD_ID": 7,"NAME": "Milieu","LEVEL_A": 1},
{"PARENT_ID": 1,"CHILD_ID": 10,"NAME": "Metal Lathe","LEVEL_A": 1},
{"PARENT_ID": 2,"CHILD_ID": 3,"NAME": "dasd","LEVEL_A": 2},
{"PARENT_ID": 2,"CHILD_ID": 8,"NAME": "Mill","LEVEL_A": 2},
{"PARENT_ID": 2,"CHILD_ID": 9,"NAME": "Mixer","LEVEL_A": 2},
{"PARENT_ID": 4,"CHILD_ID": 11,"NAME": "Masonite","LEVEL_A": 2},
{"PARENT_ID": 4,"CHILD_ID": 12,"NAME": "Meat","LEVEL_A": 2},
{"PARENT_ID": 4,"CHILD_ID": 13,"NAME": "Marscapone","LEVEL_A": 2},
{"PARENT_ID": 5,"CHILD_ID": 20,"NAME": "Manager","LEVEL_A": 2},
{"PARENT_ID": 5,"CHILD_ID": 21,"NAME": "Magician","LEVEL_A": 2},
{"PARENT_ID": 5,"CHILD_ID": 22,"NAME": "Magister","LEVEL_A": 2},
{"PARENT_ID": 5,"CHILD_ID": 24,"NAME": "Massage Artist","LEVEL_A": 2},
{"PARENT_ID": 6,"CHILD_ID": 25,"NAME": "Malleability","LEVEL_A": 2},
{"PARENT_ID": 7,"CHILD_ID": 26,"NAME": "Marine","LEVEL_A": 2},
{"PARENT_ID": 12,"CHILD_ID": 19,"NAME": "Mutton","LEVEL_A": 3},
{"PARENT_ID": 13,"CHILD_ID": 14,"NAME": "Malty","LEVEL_A": 3},
{"PARENT_ID": 13,"CHILD_ID": 15,"NAME": "Minty","LEVEL_A": 3},
{"PARENT_ID": 14,"CHILD_ID": 17,"NAME": "Minty","LEVEL_A": 4},
{"PARENT_ID": 17,"CHILD_ID": 16,"NAME": "spearMint","LEVEL_A": 5},
{"PARENT_ID": 17,"CHILD_ID": 18,"NAME": "pepperMint","LEVEL_A": 5},
{"PARENT_ID": 22,"CHILD_ID": 23,"NAME": "Malpractice","LEVEL_A": 3}
]
to:
{
"PARENT_ID": 0,
"CHILD_ID": 1,
"NAME": "Quality",
"LEVEL_A": 0,
"children": [
{
"PARENT_ID": 1,
"CHILD_ID": 2,
"NAME": "Machine",
"LEVEL_A": 1,
"children": [
{
"PARENT_ID": 2,
"CHILD_ID": 3,
"NAME": "Banana",
"LEVEL_A": 2,
"children": []
},
{
"PARENT_ID": 2,
"CHILD_ID": 8,
"NAME": "Mill",
"LEVEL_A": 2,
"children": []
},
{
"PARENT_ID": 2,
"CHILD_ID": 9,
"NAME": "Mixer",
"LEVEL_A": 2,
"children": []
}
]
},
{
"PARENT_ID": 1,
"CHILD_ID": 3,
"NAME": "Method",
"LEVEL_A": 1,
"children": []
},
{
"PARENT_ID": 1,
"CHILD_ID": 4,
"NAME": "Material",
"LEVEL_A": 1,
"children": [
{
"PARENT_ID": 4,
"CHILD_ID": 11,
"NAME": "Masonite",
"LEVEL_A": 2,
"children": []
},
{
"PARENT_ID": 4,
"CHILD_ID": 12,
"NAME": "Meat",
"LEVEL_A": 2,
"children": [
{
"PARENT_ID": 12,
"CHILD_ID": 19,
"NAME": "Mutton",
"LEVEL_A": 3,
"children": []
}
]
},
{
"PARENT_ID": 4,
"CHILD_ID": 13,
"NAME": "Marscapone",
"LEVEL_A": 2,
"children": [
{
"PARENT_ID": 13,
"CHILD_ID": 14,
"NAME": "Malty",
"LEVEL_A": 3,
"children": [
{
"PARENT_ID": 14,
"CHILD_ID": 17,
"NAME": "Minty",
"LEVEL_A": 4,
"children": [
{
"PARENT_ID": 17,
"CHILD_ID": 16,
"NAME": "spearMint",
"LEVEL_A": 5,
"children": []
},
{
"PARENT_ID": 17,
"CHILD_ID": 18,
"NAME": "pepperMint",
"LEVEL_A": 5,
"children": []
}
]
}
]
},
{
"PARENT_ID": 13,
"CHILD_ID": 15,
"NAME": "Minty",
"LEVEL_A": 3,
"children": []
}
]
}
]
},
{
"PARENT_ID": 1,
"CHILD_ID": 5,
"NAME": "Man Power",
"LEVEL_A": 1,
"children": [
{
"PARENT_ID": 5,
"CHILD_ID": 20,
"NAME": "Manager",
"LEVEL_A": 2,
"children": []
},
{
"PARENT_ID": 5,
"CHILD_ID": 21,
"NAME": "Magician",
"LEVEL_A": 2,
"children": []
},
{
"PARENT_ID": 5,
"CHILD_ID": 22,
"NAME": "Magister",
"LEVEL_A": 2,
"children": [
{
"PARENT_ID": 22,
"CHILD_ID": 23,
"NAME": "Malpractice",
"LEVEL_A": 3,
"children": []
}
]
},
{
"PARENT_ID": 5,
"CHILD_ID": 24,
"NAME": "Massage Artist",
"LEVEL_A": 2,
"children": []
}
]
},
{
"PARENT_ID": 1,
"CHILD_ID": 6,
"NAME": "Measurement",
"LEVEL_A": 1,
"children": [
{
"PARENT_ID": 6,
"CHILD_ID": 25,
"NAME": "Malleability",
"LEVEL_A": 2,
"children": []
}
]
},
{
"PARENT_ID": 1,
"CHILD_ID": 7,
"NAME": "Milieu",
"LEVEL_A": 1,
"children": [
{
"PARENT_ID": 7,
"CHILD_ID": 26,
"NAME": "Marine",
"LEVEL_A": 2,
"children": []
}
]
},
{
"PARENT_ID": 1,
"CHILD_ID": 10,
"NAME": "Metal Lathe",
"LEVEL_A": 1,
"children": []
}
]
}
But I have no idea how to make it work. I have found a Code in this Post, but I don't know how to apply this to my usecase.
Can anyone help me with this?
I would be very grateful for any advice!
Kind Regards
Jegor
答案1
得分: 2
首先，通过CHILD_ID建立一个项目的映射，然后再次循环项目，并通过PARENT_ID将它们添加到映射中适当的父项中。
假设问题中只会有一个父项：
const map = {};
for(const item of data){
map[item.CHILD_ID] = {...item, children: []};
}
let result;
for(const item of Object.values(map)){
map[item.PARENT_ID]?.children.push(item) ?? (result = item);
}
$result.textContent = JSON.stringify(result, 0, 4);
<script>
const data = [{PARENT_ID:0,CHILD_ID:1,NAME:"Quality",LEVEL_A:0},{PARENT_ID:1,CHILD_ID:2,NAME:"Machine",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:3,NAME:"Method",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:4,NAME:"Material",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:5,NAME:"Man Power",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:6,NAME:"Measurement",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:7,NAME:"Milieu",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:10,NAME:"Metal Lathe",LEVEL_A:1},{PARENT_ID:2,CHILD_ID:3,NAME:"dasd",LEVEL_A:2},{PARENT_ID:2,CHILD_ID:8,NAME:"Mill",LEVEL_A:2},{PARENT_ID:2,CHILD_ID:9,NAME:"Mixer",LEVEL_A:2},{PARENT_ID:4,CHILD_ID:11,NAME:"Masonite",LEVEL_A:2},{PARENT_ID:4,CHILD_ID:12,NAME:"Meat",LEVEL_A:2},{PARENT_ID:4,CHILD_ID:13,NAME:"Marscapone",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:20,NAME:"Manager",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:21,NAME:"Magician",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:22,NAME:"Magister",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:24,NAME:"Massage Artist",LEVEL_A:2},{PARENT_ID:6,CHILD_ID:25,NAME:"Malleability",LEVEL_A:2},{PARENT_ID:7,CHILD_ID:26,NAME:"Marine",LEVEL_A:2},{PARENT_ID:12,CHILD_ID:19,NAME:"Mutton",LEVEL_A:3},{PARENT_ID:13,CHILD_ID:14,NAME:"Malty",LEVEL_A:3},{PARENT_ID:13,CHILD_ID:15,NAME:"Minty",LEVEL_A:3},{PARENT_ID:14,CHILD_ID:17,NAME:"Minty",LEVEL_A:4},{PARENT_ID:17,CHILD_ID:16,NAME:"spearMint",LEVEL_A:5},{PARENT_ID:17,CHILD_ID:18,NAME:"pepperMint",LEVEL_A:5},{PARENT_ID:22,CHILD_ID:23,NAME:"Malpractice",LEVEL_A:3}];
</script>
<div style="white-space:pre;font-family:monospace" id="$result"></div>
英文:
First build a map of items by CHILD_ID, then loop the items again and add them to an appropriate parent in the map by PARENT_ID.
And the question assumes there could be only 1 parent:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const map = {};
for(const item of data){
map[item.CHILD_ID] = {...item, children: []};
}
let result;
for(const item of Object.values(map)){
map[item.PARENT_ID]?.children.push(item) ?? (result = item);
}
$result.textContent = JSON.stringify(result,0,4);
<!-- language: lang-html -->
<script>
const data=[{PARENT_ID:0,CHILD_ID:1,NAME:"Quality",LEVEL_A:0},{PARENT_ID:1,CHILD_ID:2,NAME:"Machine",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:3,NAME:"Method",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:4,NAME:"Material",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:5,NAME:"Man Power",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:6,NAME:"Measurement",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:7,NAME:"Milieu",LEVEL_A:1},{PARENT_ID:1,CHILD_ID:10,NAME:"Metal Lathe",LEVEL_A:1},{PARENT_ID:2,CHILD_ID:3,NAME:"dasd",LEVEL_A:2},{PARENT_ID:2,CHILD_ID:8,NAME:"Mill",LEVEL_A:2},{PARENT_ID:2,CHILD_ID:9,NAME:"Mixer",LEVEL_A:2},{PARENT_ID:4,CHILD_ID:11,NAME:"Masonite",LEVEL_A:2},{PARENT_ID:4,CHILD_ID:12,NAME:"Meat",LEVEL_A:2},{PARENT_ID:4,CHILD_ID:13,NAME:"Marscapone",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:20,NAME:"Manager",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:21,NAME:"Magician",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:22,NAME:"Magister",LEVEL_A:2},{PARENT_ID:5,CHILD_ID:24,NAME:"Massage Artist",LEVEL_A:2},{PARENT_ID:6,CHILD_ID:25,NAME:"Malleability",LEVEL_A:2},{PARENT_ID:7,CHILD_ID:26,NAME:"Marine",LEVEL_A:2},{PARENT_ID:12,CHILD_ID:19,NAME:"Mutton",LEVEL_A:3},{PARENT_ID:13,CHILD_ID:14,NAME:"Malty",LEVEL_A:3},{PARENT_ID:13,CHILD_ID:15,NAME:"Minty",LEVEL_A:3},{PARENT_ID:14,CHILD_ID:17,NAME:"Minty",LEVEL_A:4},{PARENT_ID:17,CHILD_ID:16,NAME:"spearMint",LEVEL_A:5},{PARENT_ID:17,CHILD_ID:18,NAME:"pepperMint",LEVEL_A:5},{PARENT_ID:22,CHILD_ID:23,NAME:"Malpractice",LEVEL_A:3}];
</script>
<div style="white-space:pre;font-family:monospace" id="$result"></div>
<!-- end snippet -->
答案2
得分: 2
D3拥有一个名为d3.stratify的函数，专门设计用于将表格数据转换成生成D3树状结构所需的数据结构。因此，您可以像这样使用它：
let stratified = d3
.stratify()
.id((d) => d.CHILD_ID)
.parentId((d) => d.PARENT_ID)(data);
需要注意的是根节点应该没有父节点。考虑到这一点，以下是实际应用示例：
// 此处为示例代码
data = [
{ PARENT_ID: null, CHILD_ID: 1, NAME: "Quality", LEVEL_A: 0 },
// ... （此处省略了一些数据）
];
let stratified = d3
.stratify()
.id((d) => d.CHILD_ID)
.parentId((d) => d.PARENT_ID)(data);
d3.select('#viz')
.append(() => graph(d3.hierarchy(stratified), {
label: (d) => d.data.data.NAME
}));
// ... （以下是示例代码的其余部分）
在示例中，stratified变量将包含转换后的树状结构数据，然后将其传递给graph函数以生成树形图。
需要注意的是，上述代码片段中包含一些HTML和JavaScript代码，以及D3库的引用，这些部分未翻译。如果需要完整的示例，请查看原始代码。
英文:
D3 has a function called d3.stratify that is designed precisely to manipulate tabular data into the tree structure that you need to generate a a tree with D3. Thus, you should be able to do something like so:
let stratified = d3
.stratify()
.id((d) => d.CHILD_ID)
.parentId((d) => d.PARENT_ID)(data);
Note that the root node should have no parent, though. Taking that into account, here it is in action:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
data = [
{ PARENT_ID: null, CHILD_ID: 1, NAME: "Quality", LEVEL_A: 0 },
{ PARENT_ID: 1, CHILD_ID: 2, NAME: "Machine", LEVEL_A: 1 },
{ PARENT_ID: 1, CHILD_ID: 3, NAME: "Method", LEVEL_A: 1 },
{ PARENT_ID: 1, CHILD_ID: 4, NAME: "Material", LEVEL_A: 1 },
{ PARENT_ID: 1, CHILD_ID: 5, NAME: "Man Power", LEVEL_A: 1 },
{ PARENT_ID: 1, CHILD_ID: 6, NAME: "Measurement", LEVEL_A: 1 },
{ PARENT_ID: 1, CHILD_ID: 7, NAME: "Milieu", LEVEL_A: 1 },
{ PARENT_ID: 1, CHILD_ID: 10, NAME: "Metal Lathe", LEVEL_A: 1 },
{ PARENT_ID: 2, CHILD_ID: 3, NAME: "dasd", LEVEL_A: 2 },
{ PARENT_ID: 2, CHILD_ID: 8, NAME: "Mill", LEVEL_A: 2 },
{ PARENT_ID: 2, CHILD_ID: 9, NAME: "Mixer", LEVEL_A: 2 },
{ PARENT_ID: 4, CHILD_ID: 11, NAME: "Masonite", LEVEL_A: 2 },
{ PARENT_ID: 4, CHILD_ID: 12, NAME: "Meat", LEVEL_A: 2 },
{ PARENT_ID: 4, CHILD_ID: 13, NAME: "Marscapone", LEVEL_A: 2 },
{ PARENT_ID: 5, CHILD_ID: 20, NAME: "Manager", LEVEL_A: 2 },
{ PARENT_ID: 5, CHILD_ID: 21, NAME: "Magician", LEVEL_A: 2 },
{ PARENT_ID: 5, CHILD_ID: 22, NAME: "Magister", LEVEL_A: 2 },
{ PARENT_ID: 5, CHILD_ID: 24, NAME: "Massage Artist", LEVEL_A: 2 },
{ PARENT_ID: 6, CHILD_ID: 25, NAME: "Malleability", LEVEL_A: 2 },
{ PARENT_ID: 7, CHILD_ID: 26, NAME: "Marine", LEVEL_A: 2 },
{ PARENT_ID: 12, CHILD_ID: 19, NAME: "Mutton", LEVEL_A: 3 },
{ PARENT_ID: 13, CHILD_ID: 14, NAME: "Malty", LEVEL_A: 3 },
{ PARENT_ID: 13, CHILD_ID: 15, NAME: "Minty", LEVEL_A: 3 },
{ PARENT_ID: 14, CHILD_ID: 17, NAME: "Minty", LEVEL_A: 4 },
{ PARENT_ID: 17, CHILD_ID: 16, NAME: "spearMint", LEVEL_A: 5 },
{ PARENT_ID: 17, CHILD_ID: 18, NAME: "pepperMint", LEVEL_A: 5 },
{ PARENT_ID: 22, CHILD_ID: 23, NAME: "Malpractice", LEVEL_A: 3 }
];
let stratified = d3
.stratify()
.id((d) => d.CHILD_ID)
.parentId((d) => d.PARENT_ID)(data);
d3.select('#viz')
.append(() => graph(d3.hierarchy(stratified), {
label: (d) => d.data.data.NAME}))
// Modified only slightly from
// https://observablehq.com/@d3/d3-hierarchy
function graph(
root,
{ label = (d) => d.data.id, highlight = () => false, marginLeft = 40 } = {}
) {
let dx = 12;
let dy = 120;
let width = 600;
let tree = d3
.tree()
.separation(() => 3)
.nodeSize([dx, dy]);
let treeLink = d3
.linkHorizontal()
.x((d) => d.y)
.y((d) => d.x);
root = tree(root);
let x0 = Infinity;
let x1 = -x0;
root.each((d) => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, x1 - x0 + dx * 2])
.style("overflow", "visible");
const g = svg
.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("transform", `translate(${marginLeft},${dx - x0})`);
const link = g
.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("stroke", (d) =>
highlight(d.source) && highlight(d.target) ? "red" : null
)
.attr("stroke-opacity", (d) =>
highlight(d.source) && highlight(d.target) ? 1 : null
)
.attr("d", treeLink);
const node = g
.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", (d) => `translate(${d.y},${d.x})`);
node
.append("circle")
.attr("fill", (d) => (highlight(d) ? "red" : d.children ? "#555" : "#999"))
.attr("r", 2.5);
node
.append("text")
.attr("fill", (d) => (highlight(d) ? "red" : null))
.attr("stroke", "white")
.attr("paint-order", "stroke")
.attr("dy", "0.31em")
.attr("x", (d) => (d.children ? -6 : 6))
.attr("text-anchor", (d) => (d.children ? "end" : "start"))
.text(label);
return svg.node();
}
<!-- language: lang-html -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<div id="viz"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论