Некоторые полосы черные при попытке использовать отдельные цвета

Question

Я использую d c. 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. Прямо сейчас вы вытягиваете набор индексов 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()));

Пример скрипки .