How to display d3 bubbles in different colors for a dataset with one branch and many children?

Question

Developing a d3 bubble chart by following the example posted at http://bl.ocks.org/mbostock/4063269:

My dataset is has one branch but many children (see sample below). All my bubbles are displayed in the same color. Is it possible to modify the logic to generate different color bubbles for each children in the same branch? If so, any assistance would be much appreciated.

{
 "name": "mydata",
 "children": [
  {"name": "test1", "size": 5},
  {"name": "test2", "size": 10},
  {"name": "test3", "size": 15},
  {"name": "test4", "size": 20}
 ]
}

Answer 1

Simply pass a different datum to the color function, e.g. the index:

node.append("circle")
  .attr("r", function(d) { return d.r; })
  .style("fill", function(d, i) { return color(i); });

or, for your data, size:

node.append("circle")
  .attr("r", function(d) { return d.r; })
  .style("fill", function(d) { return color(d.size); });

Answer 2

To pic random colors user this

 node.append("circle").attr("r", function(d) {
    return d.r;
}).style("fill", function(d) {
    return color(Math.random());
});

Answer 3

Two concept we can use for fill color

1. var colour = d3.scale.category20(); // it will set random color from 20 color list.

2.Its easy to set custom color based on text value which comes from JSON Data .. i have used below concept

.style("fill", function (d) {
            if (d.item.text == "InProgress") {
                return "#2DD7EB"
            } else if (d.item.text == "Signed Off") {
                return "#3CEB2D"
            } else if (d.item.text == "Pending") {
                return "#F55431"
            }