In sequences sunburst, how to give a child the same color of parent?

问题

What to do to give a child the same colour of parent but lighter, I used the following to generate colour

  var color = d3.scale.category20b();

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

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

the next image is what I need, my code produce it randomly. Gradient colour

I want to make the colour of child is lighter than the colour of parent.

Sorry, I put my result images as a link because I do not have enough reputation. thank you

回答1:

This was an interesting one. The bulk of the work was in setting up the colors and associated web page types. I had weird issues when trying to use d3.interpolateString() and have shelved that for later investigation. In any case, here is the preparation piece:

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 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); // e.g. product1, home2, etc.
    })
    ...

Here is a complete working PLUNK.

NOTE: I suggest you fork the plunk so all is not lost if it gets inadvertently deleted later.

来源：https://stackoverflow.com/questions/24142166/in-sequences-sunburst-how-to-give-a-child-the-same-color-of-parent

标签

javascript

css

d3.js

colors

sunburst-diagram