d3リンクジェネレータを使用したD3 v4折りたたみツリー

Question

d3 v4の折りたたみツリーの実装を試しています。私はリンク形状を作成するために、カスタム関数を使用している、this exampleで撚ると実現した

// Creates a curved (diagonal) path from parent to the child nodes 
function diagonal(s, d) { 

    path = `M ${s.y} ${s.x} 
      C ${(s.y + d.y)/2} ${s.x}, 
      ${(s.y + d.y)/2} ${d.x}, 
      ${d.y} ${d.x}` 

    return path 
} 

以来D3のV 4.9ありlink generatorを内蔵しており、私はそれがこの例で使用することができますか疑問。

私はこの点から曲線（x、y）は点（x、y）を作成していることを、コール私は理解

// Enter any new links at the parent's previous position. 
var linkEnter = link.enter().insert('path', "g") 
    .attr("class", "link") 
    .attr('d', function(d){ 
    var o = {x: source.x0, y: source.y0} 
    return diagonal(o, o) 
}); 

.... 

// Remove any exiting links 
var linkExit = link.exit().transition() 
    .duration(duration) 
    .attr('d', function(d) { 
    var o = {x: source.x, y: source.y} 
    return diagonal(o, o) 
}) 
.remove(); 

次のトラブルを理解している - これは基本的に同じ点に？

はまた、Iは .duration（持続時間） .ATTR）バック親要素位置 linkUpdate.transition（にコード

//トランジション以下で

// Transition back to the parent element position 
linkUpdate.transition() 
    .duration(duration) 
    .attr('d', function(d){ return diagonal(d, d.parent) }); 

を更新しようとしました（ 'd'、d3.linkHorizo​​ntal（d、d.parent）） しかし、私は* Uncaught ReferenceError：dが定義されていない*

// Transition back to the parent element position 
linkUpdate.transition() 
    .duration(duration) 
    .attr('d', d3.linkHorizontal() 
     .source(function (d) {return d.parent}) 
     .target(function (d) {return d}) 
    ); 

誰かが私の間違いを説明したり、いくつかの作業コードに私を指してもらえますか？私は、コンソールに

d3.v4.min.js:2 Error: <path> attribute d: Expected number, "MNaN,NaNCNaN,NaN,…". 

のエラーの多くを得ましたかどうもありがとう！

Answer 1

私は私の元の答えからの混乱の大部分を理解したと思います。リンク作成の「長さゼロのパス」を作成

var linkEnter = link.enter().insert('path', "g") 
    .attr("class", "link") 
    .attr('d', function(d){ 
    var o = {x: source.x0, y: source.y0} 
    return diagonal(o, o) 
}); 

とリンク除去に

var linkExit = link.exit().transition() 
    .duration(duration) 
    .attr('d', function(d) { 
    var o = {x: source.x, y: source.y} 
    return diagonal(o, o) 
    }) 
.remove(); 

、アニメーションを作成するために使用されたときに一緒に関連するリンクを持つノード、それらの親ノードをスライドアウト/取り戻す。アニメーションは、最終的な形状との間のパスの変形を、"ヌル"の形状にアニメーション化します。つまり、同じ座標で開始して終了するリンクです。

リンクは、発電機は、この

// Enter any new links at the parent's previous position. 
var linkEnter = link.enter().insert('path', "g") 
    .attr("class", "link") 
    .attr('d', d3.linkHorizontal() 
     .source(function(){ return [sourceNode.y0, sourceNode.x0]}) 
     .target(function(){ return [sourceNode.y0, sourceNode.x0]})); 

... 

// Transition back to the parent element position 
linkUpdate.transition() 
    .duration(duration) 
    .attr('d', d3.linkHorizontal() 
     .source(function (d) {return [d.parent.y, d.parent.x]}) 
     .target(function (d) {return [d.y, d.x]}) 
    ); 

... 

// Remove any exiting links 
var linkExit = link.exit().transition() 
    .duration(duration) 
    .attr('d', d3.linkHorizontal() 
     .source(function(){ return [sourceNode.y, sourceNode.x]}) 
     .target(function(){ return [sourceNode.y, sourceNode.x]})) 
    .remove(); 

ように使用することができます