D3 JSON 数据转换 [英] D3 JSON data conversion
问题描述
我有这个 JSON 数据结构:
<预><代码>[{ "dep": "d1", "name": "name1", "size": "size1" },{ "dep": "d1", "name": "name2", "size": "size2" },{ "dep": "d2", "name": "name1", "size": "size3" },{ "dep": "d2", "name": "name1", "size": "size4" }]我想把它转换成这样的嵌套结构:
<代码>{"name": "root",孩子们": [{名称":d1"，孩子们": [{ "dep": "d1", "name": "name1", "size": "size1" },{ "dep": "d1", "name": "name2", "size": "size2" }]},{名称":d2"，孩子们": [{ "dep": "d2", "name": "name1", "size": "size3" },{ "dep": "d2", "name": "name2", "size": "size4" }]}]}... 并进一步使用它来制作 Reingold–Tilford 树.谁能指出我正确的方向，我对 D3 还很陌生！
策略是根据你想要的内容创建一个新的空数据结构，然后通过遍历整个原始数据集来填充它.代码如下:
var 数据 = [{ "dep": "d1", "name": "name1", "size": "size1" },{ "dep": "d1", "name": "name2", "size": "size2" },{ "dep": "d2", "name": "name1", "size": "size3" },{ "dep": "d2", "name": "name2", "size": "size4" }]var newData = {"name": "root", "children": {}}data.forEach(函数(d){if (typeof newData.children[d.dep] !== 'undefined') {newData.children[d.dep].children.push(d)} 别的 {newData.children[d.dep] = {"name": d.dep, "children": [d]}}})newData.children = Object.keys(newData.children).map(function (key) {返回 newData.children[key];});最后的赋值是将对象转化为数组.
为 newData 提供所需的结果:
<代码>{"name": "root",孩子们": [{名称":d1"，孩子们": [{ "dep": "d1", "name": "name1", "size": "size1" },{ "dep": "d1", "name": "name2", "size": "size2" }]},{名称":d2"，孩子们": [{ "dep": "d2", "name": "name1", "size": "size3" },{ "dep": "d2", "name": "name2", "size": "size4" }]}]}jsFiddle: http://jsfiddle.net/chrisJamesC/eB4jF/
注意:此方法不适用于嵌套结构.对于嵌套结构执行此操作会更困难，但您始终可以使用递归函数.
<小时>正如@imarane 在他的回答中所建议的，您可以使用 d3.nest() 这比我手工制作的解决方案要好得多.因此，您可能会接受他的回答.通过使用它，甚至可以很容易地拥有多层嵌套:
var 数据 = [{ "dep": "d1", "name": "name1", "size": "size1" },{ "dep": "d1", "name": "name2", "size": "size2" },{ "dep": "d2", "name": "name1"},{dep":d2"}]var newData = {"key":"root",孩子们":d3.nest().key(function(d){return d.dep}).key(function(d){return d.name}).key(function(d){return d.size}).条目(数据)}哪个给出:
{"key":"root","children":[{键":d1"，值":[{"key":"name2","values":[{"dep":"d1","name":"name2","size":"size1"},{"dep":"d1","name":"name2","size":"size2"}]}]},{键":d2"，值":[{"key":"name1","values":[{"dep":"d2","name":"name1"}]},{键":未定义"，值":[{"dep":"d2"}]}]}]}以下数据结构(我希望更好地理解整点):
var 数据 = [{ "dep": "d1", "name": "name2", "size": "size1" },{ "dep": "d1", "name": "name2", "size": "size2" },{ "dep": "d2", "name": "name1"},{dep":d2"}]JsFiddle: http://jsfiddle.net/chrisJamesC/eB4jF/2/
关于 Nest 的更多信息:http://bl.ocks.org/phoebebright/raw/3176159/
I have this JSON data structure:
[
{ "dep": "d1", "name": "name1", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" },
{ "dep": "d2", "name": "name1", "size": "size3" },
{ "dep": "d2", "name": "name1", "size": "size4" }
]
and I want to convert it to a nested structure like this:
{
"name": "root",
"children": [
{ "name": "d1",
"children": [
{ "dep": "d1", "name": "name1", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" }
]
},
{ "name": "d2",
"children": [
{ "dep": "d2", "name": "name1", "size": "size3" },
{ "dep": "d2", "name": "name2", "size": "size4" }
]
}
]
}
... and further using it to make the Reingold–Tilford Tree. Can anyone point me to the right direction, I'm pretty new to D3!
The strategy is to create a new empty data structure corresponding to what you want, and then fill it by going through the whole original dataset. Here is the code:
var data = [
{ "dep": "d1", "name": "name1", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" },
{ "dep": "d2", "name": "name1", "size": "size3" },
{ "dep": "d2", "name": "name2", "size": "size4" }
]
var newData = {"name": "root", "children": {}}
data.forEach(function (d) {
if (typeof newData.children[d.dep] !== 'undefined') {
newData.children[d.dep].children.push(d)
} else {
newData.children[d.dep] = {"name": d.dep, "children": [d]}
}
})
newData.children = Object.keys(newData.children).map(function (key) {
return newData.children[key];
});
The assignment at the end is to transform the object into an array.
Which gives the desired result for newData:
{
"name": "root",
"children": [
{ "name": "d1",
"children": [
{ "dep": "d1", "name": "name1", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" }
]
},
{ "name": "d2",
"children": [
{ "dep": "d2", "name": "name1", "size": "size3" },
{ "dep": "d2", "name": "name2", "size": "size4" }
]
}
]
}
jsFiddle: http://jsfiddle.net/chrisJamesC/eB4jF/
Note: This method does not work for nested structures. It will be way harder to do this for nested structures but you can always use a recursive function.
EDIT: As suggested by @imarane in his answer, you can use the d3.nest() which is way better than my hand made solution. You might thus accept his answer. By playing with it, it even was really easy to have multiple levels of nest:
var data = [
{ "dep": "d1", "name": "name1", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" },
{ "dep": "d2", "name": "name1"},
{ "dep": "d2"}
]
var newData = {
"key":"root",
"children":
d3.nest()
.key(function(d){return d.dep})
.key(function(d){return d.name})
.key(function(d){return d.size})
.entries(data)
}
Which give:
{"key":"root","children":[
{"key":"d1","values":[
{"key":"name2","values":[
{"dep":"d1","name":"name2","size":"size1"},
{"dep":"d1","name":"name2","size":"size2"}
]}
]},
{"key":"d2","values":[
{"key":"name1","values":[
{"dep":"d2","name":"name1"}
]},
{"key":"undefined","values":[
{"dep":"d2"}
]}
]}
]}
Which the following data structure (I hope better to understand the whole point):
var data = [
{ "dep": "d1", "name": "name2", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" },
{ "dep": "d2", "name": "name1"},
{ "dep": "d2"}
]
JsFiddle: http://jsfiddle.net/chrisJamesC/eB4jF/2/
More on Nest: http://bl.ocks.org/phoebebright/raw/3176159/
这篇关于D3 JSON 数据转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
