D3 JSON数据转换 [英] D3 JSON data conversion

问题描述

我有这个JSON资料结构：

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" }
            ]
        }
    ]
}

...并进一步使用它来制作 Reingold -Tilford树。任何人都可以指向正确的方向，我是D3的新的。

... 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.

其中给出 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.

编辑：@imarane在回答中建议您可以使用 d3.nest（）这是比我的手工解决方案更好。你可能接受他的答案。通过玩它，它甚至是很容易有多个层次的巢：

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)
}     

其中：

{"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/

Nest的详情： http://bl.ocks.org/phoebebright/raw/3176159/

这篇关于D3 JSON数据转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！