2016-11-03 5 views
1

Я работаю над диаграммой гистограммы dc.js. Диаграмма имеет три цвета в цветовой гамме, основанные на значении барчарта и в зависимости от того, находятся ли они выше , ниже или в среднем для численного диапазона. Он использует внешний фильтр, который воссоздает значение диаграммы на основе спецификаций, переданных в. Если вы используете внешний фильтр, чтобы сузить значение диаграммы y до относительно небольшого диапазона, панель становится отдельной цветной диаграммой (в частности, третий цвет в цвете ассортимент). Дальнейшее исследование, по-видимому, предполагает, что оно не связано с фильтрацией dc.js, но потенциально то, что происходит, когда диапазон значений достаточно узкий.Проблема цвета на гистограмме dc.js при фильтрации в узком диапазоне

Цвет меняется правильно, когда диапазон шире, но когда он становится узким, внезапно все бары становятся одного цвета.

График:

that.ownerChart 
      .width(400) 
      .height(400) 
      .margins({top: 0, left: 10, right: 10, bottom: 20}) 
      .dimension(that.dims.dOwner) 
      .group(that._remove_empty_bins(that.groups.gOwner, (d) => { return d.value.avg; })) 
      .ordering(function (x) { 
       return x.value.avg * -1; 
      }) 
      .on('filtered', onFilter) 
      .fixedBarHeight(30) 
      .cap(cap).othersGrouper(false) 
      .elasticX(true) 
      .renderTitleLabel(false) 
      .leftLabel(function(x) { 
       return x.key; 
      }) 
      .leftLabelWidth(160) 
      //The problematic line might be here 
      .colorScale(d3.scale.quantize().range(that.colors)); 

Edited для ясности основанный на предыдущем ответе.

ответ

1

Было бы проще помочь с рабочим примером. Тем не менее, вероятно, что d3.scale.quantize() сохраняет область значений из нефильтрованной диаграммы.

Я видел подобные проблемы с choropleths в dc.leaflet.js. Это на самом деле выбор дизайна, хотите ли вы, чтобы цвета всегда оставались согласованными или масштабировались в текущем домене для большей контрастности.

Вы можете использовать calculateColorDomain пересчитывать домен на каждую перерисовке:

chart.on('preRedraw', function(chart) { 
    chart.calculateColorDomain(); 
}); 

Это будет вызывать цвет аксессор для всех значений в таблице и заменить домен цветовой шкалы с массивом значений цвета.

+0

Эй, Гордан, спасибо за ответ. Я попытался реализовать его, но, похоже, моя проблема немного отличается от того, что я описал вначале. Код фактически уже воссоздает диаграмму на фильтре, поэтому вычисление цветовой области не является проблемой. Кажется, что один цвет появляется независимо от того, добавлена ​​ли эта строка, как только диапазон окажется достаточно малым. – Paige

+1

Хмм, я думаю, мне будет сложно узнать, о чем вы говорите, не увидев пример. Но 'd3.scale.quantize()' является своего рода расширенной формой округления, поэтому могут ли все остальные значения быть достаточно близкими, чтобы они сваливались до одного значения? – Gordon

+0

Это определенно может быть так. Спасибо. Извините, что у меня нет надлежащей удаленной рабочей версии, чтобы дать вам. – Paige