尝试使用单独的颜色时有些条是黑色的

Question

我正在使用 dc.js 绘制图表，并尝试为条形图赋予不同的颜色。

有些条是黑色的，而不是我要求的颜色。如何让图表使用颜色数组？

这是代码

var keyColorCodes;
keyColorCodes = dc.config.defaultColors();

bar.colors(d3.scaleOrdinal().domain(d3.keys(keyColorCodes)).range(d3.values(keyColorCodes)));
bar.colorAccessor(function(d) { 
  return d.key;
});

Answer 1

您的 scaleOrdinal 的域应该是一个包含您的 colorAccessor 将 return 的值集的数组。现在您正在提取 dc.config.defaultColors().

的一组索引

获取值集的一种简单方法是将 group.all() 映射到 colorAccessor:

.domain(speedSumGroup.all().map(d => d.key))

此外，d3.values 旨在与关联数组（即对象）一起使用。应用于普通数组时无效。

这是一个通用的方法，在大多数情况下应该有效：

  chart
    .colorAccessor(d => d.key)
    .colors(d3.scaleOrdinal()
              .domain(speedSumGroup.all().map(d => d.key))
              .range(dc.config.defaultColors()));

Example fiddle.

尝试使用单独的颜色时有些条是黑色的

Some bars are black when trying to use individual colors

d3.js

dc.js