Need different colors on different circles CirclepackeR in JS using D3

Question

I am using circlepackeR also d3.js. I need to color each leaf node with a color from the array hexa. This array will have the same number of values as of how many leaf nodes we would have. I have not posted the whole flare data function but only one root and its child nodes.

Any advice for the same will be appreciated. Thank you!

hexa = ["#FFFFFF00" "#FF000000" "#00FF0000" "#FF000000" "#FF000000" 
"#00FF0000" "#00FF0000" "#00FF0000" "#FFFFFF00" "#FFFFFF00" "#FFFFFF00" 
"#FF000000"];

var margin = 20,
padding = 2,
diameter = 650,
root = flareData();

var color = d3.scale.linear()
.domain([0, depthCount(root)])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) {
return d.parent ? d.children ? "node" : "node node--leaf" : "node node-- 
root";
})
.style("fill", function(d) {return d.children ? color(d.depth) : null;})
.on("click", function(d) {
if (focus !== d) zoom(d), d3.event.stopPropagation();
});
  
function flareData() {
return {
"name": "flare",
"children": [{
"name": "L1",
"children": [{
 "name": "L1.1",
 "children": [{
  "name": "L1.1.1",
  "children": [{
   "name": "L1.1.1.1",
   "children": [{
    "name": "L1.1.1.1.1",
    "size": 35
    }, {
    "name": "L1.1.1.1.2",
    "size": 35
    }, {
    "name": "L1.1.1.1.3",
    "size": 35
    }, {
    "name": "L1.1.1.1.4",
    "size": 35
    }, {
    "name": "L1.1.1.1.5",
    "size": 35
    }, {
    "name": "L1.1.1.1.6",
    "size": 35
    }]            
   }]
          }]
        }]
      }]
     }
}

score 1 · Answer 1 · answered May 10 '18 at 08:19

Create ordinalScale of the colors:

var leafColor = d3.scaleOrdinal().range(hexa).domain(d3.range(0, hexa.length - 1));

Filter to get the leaves and apply fill style:

circle.filter(function(d){
    return !d.children;
  })
  .style('fill', function(da, i){
    return leafColor(i);
  });

Need different colors on different circles CirclepackeR in JS using D3

1 Answers1