我为D3树形象可视化格式化数据，我的孩子都是数组和具有更多子对象的对象。我需要它们在子数组中才能使树工作。它现在正在工作，但感觉它并不是一种非常有效的方法。
我有角度和D3方法可用。我在vanilla JS中编写了这个冗长的函数。
记录到控制台的数据格式正确。未格式化的数据是初始对象。
感谢您寻找
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
</style>
<body>
<div id=tree></div>
<script>
var unformattedData = {
"city": "All Cities",
"children": {
"group_a": {
"wins": "20"
},
"group_b": {
"wins": "15"
},
"group_c": [{
"city": "NYC",
"wins": "25",
"losses": "2",
"children": {
"group_a": {
"wins": "5"
},
"group_b": {
"wins": "3"
},
"group_c": [{
"city": "SFO",
"wins": "3",
"losses": "1",
"children": {
"group_a": {
"wins": "0"
},
"group_b": {
"wins": "0"
},
"group_c": [{
"city": "LON",
"wins": "2",
"losses": "0"
}],
"group_d": [{
"city": "LAX",
"wins": "2",
"losses": "0"
}]
}
}, {
"city": "SFO",
"wins": "2",
"losses": "1",
"children": {
"group_a": {
"wins": "0"
},
"group_b": {
"wins": "0"
},
"group_c": [{
"city": "LON",
"wins": "2",
"losses": "0"
}],
"group_d": [{
"city": "LAX",
"wins": "2",
"losses": "0"
}]
}
}, {
"city": "NYC",
"wins": "2",
"losses": "0",
"children": {
"group_a": {
"wins": "0"
},
"group_b": {
"wins": "0"
},
"group_c": [{
"city": "LON",
"wins": "2",
"losses": "0"
}],
"group_d": [{
"city": "LAX",
"wins": "2",
"losses": "0"
}]
}
}],
"group_d": [{
"city": "LAX",
"wins": "2",
"losses": "0",
"children": {}
}, {
"city": "LAX",
"wins": "1",
"losses": "1",
"children": {}
}, {
"city": "LAX",
"wins": "2",
"losses": "0",
"children": {}
}]
}
}, {
"city": "SFO",
"wins": "1",
"losses": "1",
"children": {
"group_a": {
"wins": "1"
},
"group_b": {
"wins": "1"
},
"group_c": [{
"city": "PDX",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "PHX",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "JFK",
"wins": "1",
"losses": "1",
"children": {}
}],
"group_d": [{
"city": "LGB",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "SEA",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "JFK",
"wins": "1",
"losses": "0",
"children": {}
}]
}
}, {
"city": "NYC",
"wins": "1",
"losses": "0",
"children": {
"group_a": {
"wins": "1"
},
"group_b": {
"wins": "1"
},
"group_c": [{
"city": "LON",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "LON",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "LON",
"wins": "1",
"losses": "1",
"children": {}
}],
"group_d": [{
"city": "LAX",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "LGB",
"wins": "1",
"losses": "0",
"children": {}
}, {
"city": "PHX",
"wins": "1",
"losses": "0",
"children": {}
}]
}
}],
"group_d": [{
"city": "CLT",
"wins": "6",
"losses": "0",
"children": {
"group_a": {
"wins": "0"
},
"group_b": {
"wins": "0"
},
"group_c": [{
"city": "LON",
"wins": "2",
"losses": "0"
}],
"group_d": [{
"city": "LAX",
"wins": "2",
"losses": "0"
}]
}
}, {
"city": "DAL",
"wins": "5",
"losses": "0",
"children": {
"group_a": {
"wins": "0"
},
"group_b": {
"wins": "0"
},
"group_c": [{
"city": "LON",
"wins": "2",
"losses": "0"
}],
"group_d": [{
"city": "LAX",
"wins": "2",
"losses": "0"
}]
}
}, {
"city": "BUR",
"wins": "4",
"losses": "0",
"children": {
"group_a": {
"wins": "0"
},
"group_b": {
"wins": "0"
},
"group_c": [{
"city": "LON",
"wins": "2",
"losses": "0"
}],
"group_d": [{
"city": "LAX",
"wins": "2",
"losses": "0"
}]
}
}]
}
};
var formattedData = {};
function createTree(d) {
if (d.children) {
if (d.children.typeof = 'Obj') {
var childrenArray = [];
if (d.children.group_b) {
d.children.group_b.content = 'hello';
d.children.group_b.message_group = 'group b';
childrenArray.push(d.children.group_b);
}
if (d.children.group_a) {
d.children.group_a.content = 'goodbye';
d.children.group_a.message_group = 'group a';
childrenArray.push(d.children.group_a);
}
if (d.children.group_c) {
d.children.group_c.forEach(function(child, index) {
child.message_group = 'group c';
childrenArray.push(child);
});
}
if (d.children.group_d) {
d.children.group_d.forEach(function(child, index) {
child.message_group = 'group d';
childrenArray.push(child);
});
}
d.children = childrenArray.reverse();
d.children.forEach(createTree);
}
}
formattedData = d;
console.log(formattedData);
}
createTree(unformattedData)
</script>
</body>
答案 0 :(得分：1)
function createTree(d) {
if (d.children && d.children.typeof = 'Obj') {
var childrenArray = [];
//may a bit shorter way of assigning the props
for(k in d.children){
childrenArray.push(Object.assign(d.children[k],
{
group_b:{
content:'hello',
message_group:'group b',
}
group_a:{
content:'goodbye',
message_group:'group a'
}
}[k]||{});
}
//shorter way of if
(d.children.group_c||[]).forEach(function(child, index) {
child.message_group = 'group c';
childrenArray.push(child);
});
(d.children.group_d||[]).forEach(function(child, index) {
child.message_group = 'group d';
childrenArray.push(child);
});
}
//i think theres no need for this lines
d.children = childrenArray.reverse();
setTimeout(function(){d.children.forEach(createTree)});//=> recursion to walking,better performance
}
}