Javascript 在d3.js V4中为每个条应用独特的颜色

我正在尝试为n个实体中的前10个创建条形图。我试图做到的是给每个酒吧赋予独特的颜色。当实体数为10或更少时，我能够获得预期结果

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

---

您可以将

schemeCategory10

更改为

schemeCategory20

，以获得20种不同的颜色。还有其他使用

schemeCategory20b

或

schemeCategory20c

的预构建颜色模式。 下面是您修改的代码：

---

如果你想要更多的颜色，你可以按照我在另一个答案上给出的方法来做：

这就是当你在D3代码中使用

for

循环时发生的情况…@GerardoFurtado我也有同样的担心，但找不到实现的方法，因为我是D3新手。对不起，我的错误：我读你的plunker太快了，只是浏览了一下。尽管有

for

循环，但这里的问题不同：您将一个包含20个值（即10个以上）的数组传递到范围内只有10种颜色的刻度。解决方案正在传递包含10个顶级通道的阵列：。如果您传递的数组中的元素多于颜色将重复的范围，这就是预期的行为。@GerardoFurtado感谢您审阅我的代码。我使用了代码并注释掉了该语句。我需要做的是在每次持续时间的变化后随机排列颜色序列。Thnks@David。目前我只需要10种颜色。

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