d3クラスタレイアウトのノード間のカスタムスペース

Question

ステータスが「D」の各ノードの円のサイズが異なるカスタムクラスタを作成しています。一部のノードには円がありません。

私の問題は、いくつかの円が重なっているのに対し、隣の単純なノードはそれらの間に大きすぎるスペースがあることです。 円の大きさに応じてノードとその枝の間のスペースを設定したいと思います。

var root = {  
"name": "cs4001", 
"children": [ 
    { 
    "name": "cs3212", 
    "children": [ 
    { 
    "name": "cs2121", 
    "status": "D" 
    }] 
    }, 
    { 
     "name": "cp2121", 
     "status": "D" 
    }, 
    { 
     "name": "cp21214" 
    }, 
    { 
     "name": "cp21215" 
    } 

] 
}; 

(function(root) { 
    var nodes = cluster.nodes(root), 
    links = cluster.links(nodes); 

    var link = svg.selectAll(".link") 
    .data(links) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", diagonal); 

    var node = svg.selectAll(".node") 
    .data(nodes) 
    .enter().append("g") 
    .attr("class", "node") 
    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x +  ")"; }) 

    node.append("circle") 
    .attr("r", function(d) {return d.status=="D" ? 70: null}); 

    node.append("text") 
    .attr("dx", function(d) { return d.children ? -8 : 8; }) 
    .attr("dy", 3) 
    .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) 
    .text(function(d) { return d.name; }); 
})(root); 

私は私が何を意味するかを示すためにグーグルで最初に見つかったfiddleを更新しました。

Answer 1

クラスタレイアウトを2つ変更する必要があります。まず、.sizeの代わりに、.nodeSizeを使用し、.separationという関数を定義して、2つのノード間の距離を求めなければなりません。

2つのノード間の距離は、.nodeSizeで指定された垂直パラメータと、2つのノードの所定の分離関数の戻り値を掛け合わせることによって計算されます。

私はfiddleを更新して、これらの変更が反映されています。