javascript - d3 将颜色映射到值以外的其他内容，因为当值相等时颜色会重复

Question

当数组中的值彼此相等时，颜色将相同。这是一个例子:

http://jsfiddle.net/featherita/8SkG9/1/

这就是我想要它做的事情，即使值相等:

http://jsfiddle.net/featherita/8SkG9/

它发生在使 y 轴成为 y 轴的堆叠条形图上以及左侧的饼图上，因为我正在使用颜色数组填充值。

如果将bottom 和top = 彼此设置，它们都将采用数组的第一种颜色。

"threshRange":[{ "bottom": 6, "middle": 4, "top": 7 }],

如果您将 SiteStatus.slice = 中的第一个和最后一个值设置为彼此，它们也会呈现相同的颜色。

"slice":[16,84] *** in the first node and "slice":[16,84] *** in the last node

当数据自动传递时，这会导致问题，是否有更好的方法来设置它，以便它们始终呈现数组中的下一种颜色，绿色，黄色，红色？

Answer 1

您可以简单地使用(在本例中为父元素)元素的索引而不是值来确定填充:

.style("fill", function (d, i, j) { return color(j); });

完整演示 here .