dc.js heatmap colour range not getting updated after filter applied

问题

I'm using dc.js to create a dashboard, the dataset contains 3 types of reading from 1 year in a 24 hour basis. (in the example fiddle, i only use 15 days just for demonstration purpose)

Here is the link to a JSFiddle to better illustrate my problem http://jsfiddle.net/table315/hLzLzhss/

I've used a row chart to show the total of each reading, and a heatmap to show the total reading of each day at each time.

When 1 type of reading from the row chart has selected, the heatmap doesn't seems to recalculate the min and max of the colour domain. (a heatbox shows a light colour even the value is the highest in the current filtered dataset. )

dayAndTimeChart
  .width(30 * 24 + 500)
  .height(20 * 31)
  .dimension(dayAndTimeDimension)
  .group(dayAndTimeGroup)
  .keyAccessor(function(d) {
    return d.key[0];
  })
  .valueAccessor(function(d) {
    return d.key[1];
  })
  .colorAccessor(function(d) {
    return d.value;
  })
  .colors(["#fff7ec", "#fee8c8", "#fdd49e", "#fdbb84", "#fc8d59", "#ef6548", "#d7301f", "#b30000", "#7f0000"])
  .calculateColorDomain()
  .title(function(d) {
    return "Time:   " + d.key[0] + "\n" +
      "Day:  " + d.key[1] + "\n" +
      "value: " + d.value;
  });

Is there something I'm missing here? or is it a bug? if that is the case, is there any workaround?

回答1:

This is by design, because the color mapping may have some absolute meaning.

So if you want the domain to adjust and show the full range of colors for each new set of values, you need to calculateColorDomain() each time the chart is redrawn:

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

Working fork of your fiddle: http://jsfiddle.net/gordonwoodhull/w1mzwv8d/2/

来源：https://stackoverflow.com/questions/36038808/dc-js-heatmap-colour-range-not-getting-updated-after-filter-applied

标签

javascript

d3.js

dc.js

crossfilter