有没有办法用dc.js制作热图的关键字或图例？

Question

我用dc.js制作了热图，我想知道dc.js中的热图是否有关键或图例功能。我在互联网上搜索过，似乎找不到内置的方式，所以还有其他人解决过这个问题吗？

Answer 1

我面对同样的任务而我所做的就是制作了第二张热图，它是从最小值到最大值的一行。

var range = maxValue - minValue;

var heatArr = [];
for (var i = 0; i < 24; i++) {
  heatArr.push({
    val: minValue + i / 23 * rangeValue,
    index: i
  });
}

var ndx = crossfilter(heatArr);

var keyHeatmap = ndx.dimension(function(d) {
  return [d.index, 1];
});

var keyHeatmapGroup = keyHeatmap.group().reduceSum(function(d) {
  return d.val;
});

var heatmapChart = dc.heatMap("#heatmapKey");

var heatColorMapping = function(d) {
  return d3.scale.linear().domain([minValue, maxValue]).range(["blue", "red"])(d);
};

heatColorMapping.domain = function() {
  return [minValue, maxValue];
};

heatmapChart.width(400)
        .height(80)
        .dimension(keyHeatmap)
        .group(keyHeatmapGroup)
        .colorAccessor(function(d) {
          return d.value;
        })
        .keyAccessor(function(d) { return d.key[0]; })
        .valueAccessor(function(d) { return d.key[1]; })
        .colsLabel(function(d){
          return heatArr[d].val.toFixed(0);
        })
        .rowsLabel(function(d) {
          return "Key";
        })
        .transitionDuration(0)
        .colors(heatColorMapping1)
        .calculateColorDomain();

heatmapChart.xBorderRadius(0);
heatmapChart.yBorderRadius(0);

在我的原始热图中找到了

minValue和maxValue。我的最终结果如下：