3

怎么做才能给孩子与父母相同的颜色但更浅，我使用以下来生成颜色

  var color = d3.scale.category20b();

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

此代码为每个节点提供随机颜色。 第一张图片：随机颜色

下一张图片是我需要的，我的代码随机生成它。 渐变色

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

对不起，我把我的结果图像作为链接，因为我没有足够的声誉。谢谢你

4

1 回答 1

3

这是一个有趣的。大部分工作是设置颜色和相关的网页类型。我在尝试使用时遇到了奇怪的问题，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。

注意：我建议您将 plunk 分叉，这样如果以后无意中删除，一切都不会丢失。

于 2014-06-10T23:53:17.063 回答