[英]D3 JSON data conversion
I have this JSON data structure: 我有这个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" }
]
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 . ......并进一步用它来制作Reingold-Tilford树 。 Can anyone point me to the right direction, I'm pretty new to D3!
谁能指出我正确的方向,我对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
: 这为
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/ 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. 编辑:正如@imarane在他的回答中所建议的,你可以使用d3.nest() ,它比我的手工解决方案更好。 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/ JsFiddle: http : //jsfiddle.net/chrisJamesC/eB4jF/2/
More on Nest: http://bl.ocks.org/phoebebright/raw/3176159/ 更多关于Nest: http : //bl.ocks.org/phoebebright/raw/3176159/
another option is to use the nest method built into D3.... 另一个选择是使用内置于D3的嵌套方法....
var nested = d3.nest()
.key(function(d,i){ return d.dep; })
.entries(data);
which outputs: 哪个输出:
[
{
"key": "d1",
"values": [
{
"dep": "d1",
"name": "name1",
"size": "size1"
},
{
"dep": "d1",
"name": "name2",
"size": "size2"
}
]
},
{
"key": "d2",
"values": [
{
"dep": "d2",
"name": "name1",
"size": "size3"
},
{
"dep": "d2",
"name": "name2",
"size": "size4"
}
]
}
]
JsFiddle: http://jsfiddle.net/imrane/bSGrG/1/ JsFiddle: http : //jsfiddle.net/imrane/bSGrG/1/
Hey guys I think I found a fairly simple solution. 嘿伙计们,我想我找到了一个相当简单的解决方案。 I accomplished a very nice nesting of a large dataset (400,000 rows) for a hierarchical bar chart in a very streamline way.
我以非常精简的方式为分层条形图完成了一个非常好的大数据集(400,000行)嵌套。 It utilizes the Underscore library and an additional function
_.nest
. 它利用了
_.nest
库和一个附加功能_.nest
。 Simply download and include the two libraries necessary 只需下载并包含必要的两个库
src="underscore-min.js"
src="underscore.nest.js"
Then use the _.nest
function to create your structure. 然后使用
_.nest
函数创建结构。 Here's my line: 这是我的路线:
var newdata = _.nest(data, ["Material", "StudyName"]);
"Material"
and "StudyName"
are the columns I want to group my structure to. "Material"
和"StudyName"
是我想要将结构分组的列。
There are other options to use this function if you need to accomplish more things but I will leave it like this 如果你需要完成更多的事情,还有其他选项可以使用这个功能,但我会这样做
Use this. 用这个。 U can check the output in the console of the browser if u need.
如果需要,你可以在浏览器的控制台中检查输出。
function reSortRoot(root, value_key) {
//console.log("Calling");
for ( var key in root) {
if (key == "key") {
root.name = root.key;
delete root.key;
}
if (key == "values") {
root.children = [];
for (item in root.values) {
root.children.push(reSortRoot(root.values[item],
value_key));
}
delete root.values;
}
if (key == value_key) {
root.value = parseFloat("1");
delete root[value_key];
}
}
return root;
}
var testdata=[
{ "dep": "d1", "name": "name1", "size": "size1" },
{ "dep": "d1", "name": "name2", "size": "size2" },
{ "dep": "d2", "name": "name1", "size": "size3" },
{ "dep": "d2", "name": "name1", "size": "size4" }
];
var testJson = d3.nest()
.key(function(d) { return d.dep; })
.entries(testdata);
console.log(testJson);
var testRoot={};
testRoot.key = "Information";
testRoot.values = testJson;
testRoot = reSortRoot(testRoot, "name");
console.log(testRoot);
Since d3-collection
has been deprecated in favor of d3.array
, we can use d3.groups
to achieve what used to work with d3.nest
: 由于
d3-collection
已被弃用以支持d3.array
,我们可以使用d3.groups
来实现与d3.nest
一起使用的d3.nest
:
var output = {
"name": "root",
"children": d3.groups(input, d => d.dep).map(([k, vs]) => ({ "name": k, "children": vs }))
};
For example: 例如:
var input = [ { "dep": "d1", "name": "name1", "size": "size1" }, { "dep": "d1", "name": "name2", "size": "size2" }, { "dep": "d2", "name": "name1", "size": "size3" }, { "dep": "d2", "name": "name1", "size": "size4" } ]; var output = { "name": "root", "children": d3.groups(input, d => d.dep).map(([k, vs]) => ({ "name": k, "children": vs })) }; console.log(output);
<script src="https://d3js.org/d3-array.v2.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.