D3 JSON數據轉換

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樹 。 誰能指出我正確的方向，我對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行）嵌套。 它利用了_.nest庫和一個附加功能_.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一起使用的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>