Question

我有这个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",
    "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 Tree。任何人都可以指出我正确的方向，我对D3很新！

Answer 1

策略是创建一个与您想要的对应的新的空数据结构，然后通过遍历整个原始数据集来填充它。这是代码：

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

最后的分配是将对象转换为数组。

这为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/

注意：此方法不适用于嵌套结构。对嵌套结构执行此操作会更加困难，但您始终可以使用递归函数。

编辑：正如@imarane在他的回答中所建议的那样，你可以使用d3.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"}
        ]}
    ]}
]}

以下数据结构（希望能更好地理解整点）：

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/

Answer 2

另一种选择是使用内置于D3的嵌套方法....

var nested = d3.nest()
.key(function(d,i){ return d.dep; })
.entries(data);

输出：

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

Answer 3

嘿伙计们，我想我找到了一个相当简单的解决方案。我以非常精简的方式为分层条形图完成了一个非常好的大数据集（400,000行）嵌套。它使用Underscore库和附加函数_.nest。只需下载并包含必要的两个库

src="underscore-min.js"
src="underscore.nest.js"

然后使用_.nest函数创建结构。这是我的路线：

var newdata = _.nest(data, ["Material", "StudyName"]);

"Material"和"StudyName"是我要将结构分组到的列。

如果您需要完成更多的事情，还有其他选项可以使用此功能，但我会像这样离开

Answer 4

使用它。如果需要，你可以在浏览器的控制台中检查输出。

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

Answer 5

由于不赞成使用d3-collection而推荐使用d3.array，因此我们可以使用d3.groups来实现与d3.nest一起使用的功能：

var output = {
  "name": "root",
  "children": d3.groups(input, d => d.dep).map(([k, vs]) => ({ "name": k, "children": vs }))
};

例如：

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>

D3 JSON数据转换

5 个答案: