d3js：折りたたみテーブルの作成とネストされたデータの問題

Question

d3js内に折りたたみ可能なテーブルを作成しようとしており、作業しているデータ構造のネストされた性質に問題があります。データは、次のような構成されています。私は最初のテーブルを作成するとき

var source = [ 
{name: William, age: 40, children: [{name: Billy, age: 10},{name:Charles, age: 12}]}, 
{name: Nancy, age: 35, children: [{name: Sally, age:8}]} 
] 

は、私は同様に、それぞれの親内_childrenオブジェクトにchildrenアレイ上を移動：

tableData.forEach(function(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
}); 

d3js'典型的なデータを使用し入力私はテーブル内の各親の行と座標を入力することができます。

var tableRow = tableSvg.selectAll('.tableRow') 
    .data(source); 

var rowEnter = tableRow.enter() 
    .append("g") 
    .classed("tableRow", true) 
    .attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")" 
    }); 

と同様に各行を表す矩形配置：

source.forEach(function(d) { 
    d.x = x0; 
    d.y = y0; 
    var parentX = x0, 
     parentY = y0; 
    y0 += barHeight + padding; 
    if (d.children) { 
     d.children.forEach(function(data) { 
     data.x = x0; 
     data.y = y0; 
     data.parentX = parentX; 
     data.parentY = parentY; 
     y0 += barHeight + padding; 
     shownChildren.push(data); 
     }) 
    } 
    }); 

Iは、通常のデータ選択方法を利用行をクリックすると

var rowRect = rowEnter.append("rect") 
    .attr("height", barHeight) 
    .attr("width", barWidth) 
    .style("fill", color) 
    .on("click", click); 

var rowText = rowEnter.append("text") 
    .attr("dy", 15) 
    .attr("dx", 5.5) 
    .text(function(d) { 
    if (d.name.length > 70) { 
     return d.name.substring(0, 67) + "..."; 
    } else { 
     return d.name; 
    } 
    }) 
    .on("click", click); 

を、行が作るために移動しますスペースは、子どもの行を追加すると、_children配列はchildrenに戻され、上記のコードではdispレイアウト：

function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    updateTable(source); 
} 

ただし、上の親の場合と全く同じ方法で各子の行を作成すると、問題が発生します。私の現在の実装では、配列番号shownChildren（第3のコードブロックに見られるように）が構築され、テーブル内の空白が子で埋められます。最初は実装がうまくいくように見えましたが、行をクリックすると、各子行が位置を変更します。

私は現在、問題の原因を推測していません。

コードの概要は、jsfiddleにあります。

Answer 1

私がしていた問題は、毎回shownChildrenアレイをさまざまな数の子で再構築していたことでした。 と_childrenをすべてshownChildrenアレイに追加して（常に同じ順序で！）、それぞれの親の背後にある_childrenを隠すことで問題を解決しました。

jsfiddle