D3.js：折りたたみ/展開時に放射状ツリーの要素間のリンクを更新する

Question

これはthis questionのフォローアップです。

私はマイク・ボストックによって original hierarchical edge bundlingで見つかったコードの一部を使用して this JSFiddle内の要素間のリンクを追加するために管理し、 collapsible treeの放射状のバージョンにそれらを追加した

：

var bundle = d3.layout.bundle(); 

var line = d3.svg.line.radial() 
    .interpolate("bundle") 
    .tension(.85) 
    .radius(function(d) { return d.y; }) 
    .angle(function(d) { return d.x/180 * Math.PI; }); 

var middleLinks = packageImports(root); 

svg.selectAll("path.middleLink") 
      .data(bundle(middleLinks)) 
     .enter().append("path") 
      .attr("class", "middleLink") 
      .attr("d", line); 

「packageImport」関数とすることができます一番下にあります。

要素を折りたたんだ/展開するたびにこれらのリンクを更新しようとしていますが、どうやってそれをどうやって進めるのか分かりません。

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

    update(d); 
} 

また、それは、次の行を削除すると崩壊していない子供を持つ別の正しいレイアウト得られることを言及する価値がある：

を位置が変更された場合には、以下の一部または更新機能内部の部品とは何かを持っているかもしれません

root.children.forEach(collapse); 
update(root); 

この理由から、クリック機能後のアップデートでは新しいレイアウトが考慮されない理由はわかりません。

JSFiddleを自由に編集してください。

内部レベルが移動せず、常に拡大されたすべてのサイズの間隔に設定されるため、第2レベルが表示または消滅し、第1レベルが変更されずに適合します。この解決法を答え、として提案しても構いませんが、依然として計画Bです。

Answer 1

実際には値は更新されていません。すべて以下のコードは、アップデートにあなたのいずれかを持っていない新しいリンク、

svg.selectAll("path.middleLink") 
.data(bundle(middleLinks)) 
.enter().append("path") 
.attr("class", "middleLink") 
.attr("d", line); 

あなたは新しいものに加えて、既存のリンクを更新することにより、これを修正することができ、あるん

var middle = svg.selectAll("path.middleLink") 
    .data(bundle(middleLinks)); 
middle.enter().append("path") 
    .attr("class", "middleLink") 
    .attr("d", line); 
middle.attr("d", line); 

https://jsfiddle.net/1mgw37tk/