In the sunburst sequence, how to give the child the same parent color?

Question

What to do to give the child the same parent color, but lighter, I used the following to generate the color

  var color = d3.scale.category20b ();

  .style ("fill", function (d) {return color ((d.children? d: d.parent) .name);})

this code gives a random color for each node. first image: random color

The following image is what I need, my code produces it randomly. Gradient color

I want the color of the child to be lighter than the color of the parent.

Sorry, I put my resulting images as a link because I don't have enough reputation. thanks

Answer 1

That was interesting. The bulk of the work was to customize the colors and types of web pages associated with them. I had weird problems trying to use d3.interpolateString() and set aside for further investigation. In any case, here is part of the preparation:

 var brewerColors = d3.entries(colorbrewer); // offsets 1-5 look too similar // offsets 6-13 offer the greatest contrast // offsets 4 and above are no good var brewerOffset = 9; var pageTypes = ["home","product","search","account","other","end"]; var colors = []; var pages = []; for (var ct=0; ct<pageTypes.length; ct++) { var colorBucket = brewerColors[ct + brewerOffset].value[pageTypes.length]; for (var ct2=0; ct2<colorBucket.length; ct2++) { pages.push(pageTypes[ct] + (ct2 + 1)); colors.push(colorBucket[ct2]); } } var ramps = d3.scale.ordinal() // do not reverse if center colors are lighter than edge colors .domain(pages.reverse()) .range(colors); 

After that, filling out the shapes with the appropriate colors was simple:

 var path = vis.data([json]).selectAll("path") .data(nodes) .enter().append("svg:path") ... .style("fill", function(d) { return ramps(d.name + d.depth); // eg product1, home2, etc. }) ... 

Here is the full working PLUNK .

NOTE. . I suggest you unlock the panel so that everything is not lost if it is subsequently deleted accidentally.