2017-06-30 6 views
1

これに続いてインデントされた折りたたみ可能なツリーを構築するためにblogを作成しました。私はこれに少し修正が必要です。私はこの木を根なしにしたい。これは馬鹿に聞こえるかもしれませんが、これが私の必要なものです。さて、d3ツリーの2つの主要な要素はノードとリンクです。このlinkを使用してノードを非表示にし、ルートノードの高さ係数を0に設定し、ラベルを ""として回避する方法を騙しました。したがって、ルートノードはもう可視ではありません。しかし、私は24の子ノードからルートにリンクを隠すことに関連して、何らかのトリックを行うことに失敗しました。したがって、すべての子ノードは「名前なし」のルートノードにリンクされているように見えます。私はツリーのルートへのリンクを隠したい。注:24のすべての子ノードにはサブ子があります。以下は、動作していないリンクの部分的なコードです。d3ツリーの子ノードからルートノードへのリンクを削除します

// Update the links 
var link = svg.selectAll("path.link") 
    .data(tree.links(nodes), function(d) { return d.target.id; }); 

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

// Transition links to their new position. 
link.transition() 
    .duration(duration) 
    .attr("d", diagonal); 

// Transition exiting nodes to the parent's new position. 
link.exit().transition() 
    .duration(duration) 
    .attr("d", function(d) { 
     var o = {x: source.x, y: source.y}; 
     return diagonal({source: o, target: o}); 
    }) 
    .remove(); 

// Stash the old positions for transition. 
nodes.forEach(function(d) { 
    d.x0 = d.x; 
    d.y0 = d.y; 
}); 

答えて

0

あなたは

link.enter().insert("path", "g") 
.attr("class", "link") 
.attr("d", function(d) { 
    var o = {x: source.x0, y: source.y0}; 
    return diagonal({source: o, target: o}); 
}) 
.style("display", function (d) { 
    if (d.depth == 1) { //Is top link         
     return 'none'; 
    } 
}) 
.transition() 
.duration(duration) 
.attr("d", diagonal); 

これは1の深さを持つすべてのリンクを隠してしまうあなたのリンク要素の表示プロパティを使用しますが、それでも

+0

はないに違いない他のものを表示することができます出力。また、私は試しました\t \t \t \t .attr( "class"、function(d){if(dsource.depth> 0){return "link";}})しかし助けにはなりませんでした。 – w1n5rx

関連する問題