为 d3.js V4 中的每个条形应用唯一颜色答案

【问题标题】：Apply a unique colour to each bar in d3.js V4为 d3.js V4 中的每个条形应用唯一颜色
【发布时间】：2018-04-09 07:17:15
【问题描述】：

我正在尝试为 n 个实体中的前 10 个创建条形图。我想要实现的是为每个条形赋予独特的颜色。当实体数量为 10 或更少时，我能够得到预期的结果。 This is what I am getting.

我只想使用 d3.schemeCategory10 中的颜色。这是我的plunker 代码。

    bar_svg.selectAll("#bar_chart")
    .data(TOP_TEN_CHANNELS)
    .enter().append("rect")
    .attr("rx", 2)         // set the x corner curve radius
    .attr("ry", 2)
    .attr("class", "bar")
    .style("fill", function(d,i){ return color(d.channel);})
    .attr("x", 35)
    .transition() 
    .ease(d3.easePoly)          // apply a transition
    .duration(500)
    .attr("height", y.bandwidth()-5)
    .attr("y", function(d) { return y(d.channel); })
    .attr("width", function(d) { return x(d.views); });

【问题讨论】：

当您在 D3 代码中使用 for 循环时会发生这种情况...
@GerardoFurtado 我也有同样的担忧，但由于我是 d3 的新手，所以找不到实现的方法。
对不起，我的错误：我读你的 plunker 太快了，只是略读了一遍。尽管有for 循环，但这里的问题是不同的：您将一个包含 20 个值（即超过 10 个）的数组传递给该范围内只有 10 种颜色的刻度。解决方案是传递您的 10 个顶级频道数组：plnkr.co/edit/rrAqlfRY21ZO6Wx2WsLO?p=preview。如果您传递的数组元素多于颜色将重复的范围，这就是预期的行为。
@GerardoFurtado 感谢您查看我的代码。我使用了代码并注释掉了该语句。我需要做的是在每次持续时间变化后随机化颜色序列。

标签： javascript d3.js

【解决方案1】：

您可以将schemeCategory10 更改为schemeCategory20 以获得20 种不同的颜色。还有其他使用schemeCategory20b 或schemeCategory20c 的预构建颜色模式。这是您修改的代码：

https://plnkr.co/edit/IsGQC75RIqoBijgcenu3

如果您想要更多颜色，可以按照我在另一个答案中给出的配方进行操作：How can I generate as many colors as I want using d3?

【讨论】：

谢谢@David。目前我只需要 10 种颜色。