如何將JSON對象數組准備為D3分層樹結構

Question

我正在嘗試像這樣在D3v4中創建可折疊的樹形圖。 我將數據作為JSON對象數組，需要將數據准備為分層樹結構。

我的數據如下所示：

[
  {
    "ingoingBatch": "BC1",
    "process": "API",
    "outgoingBatch": "CD1",
    "counterIndex": "5"
  },
  {
    "ingoingBatch": "BC2",
    "process": "API",
    "outgoingBatch": "CD1",
    "counterIndex": "6"
  },
  {
    "ingoingBatch": "AB1",
    "process": "PUR",
    "outgoingBatch": "BC1",
    "counterIndex": "1"
  },
  {
    "ingoingBatch": "AB2",
    "process": "PUR",
    "outgoingBatch": "BC1",
    "counterIndex": "2"
  },
  {
    "ingoingBatch": "AB3",
    "process": "PUR",
    "outgoingBatch": "BC2",
    "counterIndex": "3"
  },
  {
    "ingoingBatch": "AB4",
    "process": "PUR",
    "outgoingBatch": "BC2",
    "counterIndex": "4"
  }
]

我想要的結構就是這樣的結構

我嘗試制作一個JSfiddle ，您可以在其中看到第129-142行的原始數據。 我已經插入線11-115我自己的數據和使用中發現的功能，D3功能窩在這里就行117-126：

var entries = d3.nest()
    .key(function(d) { return d.ingoingBatch; })
    .key(function(d) { return d.outgoingBatch; })
    .entries(json);

console.log(entries);

var treeData = d3.hierarchy(entries);

console.log(treeData);

我認為問題出在數據准備之內。 使用數據運行JSfiddle時收到的錯誤消息是： TypeError: root.children is undefined

根節點應為C1，結構應如下所示：

           C1 
    B2            B1
 A1    A2      A3    A4

節點之間的鏈接是ingoingBatch和outgoingBatch。 有人可以幫助准備我的數據以使我的數據准備正確嗎？

-----------更新-----------

如果我使用的答案從這里這個問題我得到有合適的數據結構更接近一點。 當我代替這個：

var entries = d3.nest()
    .key(function(d) { return d.ingoingBatch; })
    .key(function(d) { return d.outgoingBatch; })
    .entries(json);

console.log(entries);

var treeData = d3.hierarchy(entries);

console.log(treeData);

使用其他問題的答案，並改用以下功能：

var newData = { name :"root", children : [] },
    levels = ["outgoingBatch"];
    // levels = ["ingoingBatch","outgoingBatch"];

// For each data row, loop through the expected levels traversing the output tree
json.forEach(function(d){
    // Keep this as a reference to the current level
    var depthCursor = newData.children;
    // Go down one level at a time
    levels.forEach(function( property, depth ){

        // Look to see if a branch has already been created
        var index;
        depthCursor.forEach(function(child,i){
            if ( d[property] == child.name ) index = i;
        });
        // Add a branch if it isn't there
        if ( isNaN(index) ) {
            depthCursor.push({ name : d[property], children : []});
            index = depthCursor.length - 1;
        }
        // Now reference the new child array as we go deeper into the tree
        depthCursor = depthCursor[index].children;
        // This is a leaf, so add the last element to the specified branch
        if ( depth === levels.length - 1 ) depthCursor.push({ outgoingBatch : d.outgoingBatch });
    });
});

var treeData = newData
console.log(treeData);

我得到三個圖表。 但是它的結構不正確，因為CD1沒有設置為根節點，而是子節點之一。

Answer 1

我發現了如何從獲取JSON對象的地方返回根節點。 通過這種方式，我可以使用它，並使用更新中的代碼使JSON對象成為其子對象。