有没有办法使用 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 在我的原始热图中找到。我的最终结果如下所示：