0

このツリー図には、 http： //bl.ocks.org/1249394にあるコードを使用しています。

ルートノードのみのサイズを変更するにはどうすればよいですか？ルートノードのサイズをすべての子ノードとは異なるものにしたい。どうすればよいですか？

4

1 に答える 1

0

基本的に、ノードを区別するために使用できるプロパティが必要です。nodeaがであるかどうかを判断するために使用できる既存の親プロパティがあるようrootです。したがって、ノードに親がない場合（つまり、ルートである場合）は、追加関数を変更して円の半径を変更する必要があります。

nodeEnter.append("svg:circle")
  .attr("r", function(d) { return !d.parent ? 8.5 : 4.5; })
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
  .on("click", click);

http://bl.ocks.org/3767443で実際の例を見ることができます。

一般に、特定のノードを変更する場合は、次のように、異なるノードに新しいプロパティを追加できます。

{
    "name": "MAT",
    "root": true,
    "children": [
        { ... } ... 
    ]
}

次に、このプロパティを使用して、ノードが追加されるときにノードを変更できます（ここでは円を変更していますが、追加されるテキストに対しても同じことができます）。円のサイズを4.5にハードコーディングする代わりに、rootプロパティを使用してルートノードを大きくしていることに注意してください。 

nodeEnter.append("svg:circle")
    .attr("r", function(d) { return d.root ? 8 : 4.5; })
    .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
    .class(function(d) { return d.root ? 'root-node' : 'normal-node'; })
    .on("click", click);

上記のようにクラスも設定した場合は、CSSを使用してルートノードのスタイルを自由に設定できます。

.root-node {
  cursor: pointer;
  fill: #fff;
  stroke: green;
  stroke-width: 3.5px;
}
于 2012-09-22T19:03:49.963 に答える