Question

如何为孩子提供相同颜色的父母但更轻，我使用以下内容生成颜色

  var color = d3.scale.category20b();

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

此代码为每个节点提供随机颜色。 first image : random colour

下一张图片是我需要的，我的代码随机生成。 Gradient colour

我想让孩子的颜色比父母的颜色浅。

抱歉，我将结果图片作为链接，因为我没有足够的声誉。谢谢

Answer 1

这是一个有趣的。大部分工作是设置颜色和相关的网页类型。在尝试使用d3.interpolateString()时我遇到了奇怪的问题，并将其搁置以供日后调查。无论如何，这是准备工作：

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);

之后，用适当的颜色填充形状很简单：

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。

注意：我建议您拨打插件，以便在以后无意中删除时不会丢失。

在森伯斯特的序列中，如何给孩子一样的父母颜色？

1 个答案: