在序列sunburst，如何给一个孩子相同的父母的颜色？ [英] 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

推荐答案

这是一个有趣的。大部分工作是设置颜色和相关的网页类型。我有奇怪的问题，当尝试使用 d3.interpolateString（）并搁置为以后的调查。无论如何，这里是准备片：

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.
    })
    ...

这是一个完整的工作 PLUNK 。

注意：我建议您将叉子拨叉，以免所有未经删除的小东西都会丢失。

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

这篇关于在序列sunburst，如何给一个孩子相同的父母的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！