javascript - In sequences sunburst, how to give a child the same color of parent? -
what give child same colour of parent lighter, used following generate colour
var color = d3.scale.category20b(); .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
this code gives random colour each node. first image : random colour
the next image need, code produce randomly. gradient colour
i want make colour of child lighter colour of parent.
sorry, put result images link because not have enough reputation. thank you
this interesting one. bulk of work in setting colors , associated web page types. had weird issues when trying use d3.interpolatestring()
, have shelved later investigation. in case, here preparation piece:
var brewercolors = d3.entries(colorbrewer); // offsets 1-5 similar // offsets 6-13 offer greatest contrast // offsets 4 , above no var breweroffset = 9; var pagetypes = ["home","product","search","account","other","end"]; var colors = []; var pages = []; (var ct=0; ct<pagetypes.length; ct++) { var colorbucket = brewercolors[ct + breweroffset].value[pagetypes.length]; (var ct2=0; ct2<colorbucket.length; ct2++) { pages.push(pagetypes[ct] + (ct2 + 1)); colors.push(colorbucket[ct2]); } } var ramps = d3.scale.ordinal() // not reverse if center colors lighter edge colors .domain(pages.reverse()) .range(colors);
after that, filling shapes appropriate colors 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 complete working plunk.
note: suggest fork plunk not lost if gets inadvertently deleted later.
Comments
Post a Comment