Question

I am using the the code found here: http://bl.ocks.org/1249394 for this tree diagram.

How do I change the the size of the root node only? I want the root node to have a different size than all the child nodes. How do I do this?

Answer 1

Basically you need a property that you can use to tell the nodes apart. Looks like there is an existing parent property that can be used to figure out when a node is the root. So you just need to change the append functions to modify the radius of the circle if the node has no parent (that is, it is the 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);

You can see a working example at http://bl.ocks.org/3767443.

In general, if you want to modify particular nodes you can add a new property to nodes that you want to be different like this:

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

You can then use this property to modify the node as it’s being appended (here I’m modifying the circle, but you can do the same for the text as it is added). Notice that instead of hard coding the size of the circle to 4.5, I’m now using the root property to make root nodes larger.

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);

If you also set the class like I did above, then you can use CSS to style your root node however you want:

.root-node {
  cursor: pointer;
  fill: #fff;
  stroke: green;
  stroke-width: 3.5px;
}