HeatMap 固定框大小（根据行和列调整 heatMap 大小）答案

【问题标题】：HeatMap fixed box size (resize heatMap size based on rows and columns)HeatMap 固定框大小（根据行和列调整 heatMap 大小）
【发布时间】：2019-02-22 17:46:36
【问题描述】：

希望我的热图根据行数和列数调整其大小，以便框大小保持固定大小。

热图：

heatMap
  .width(1000)
  .height(400)
  .dimension(dimension)
  .group(filtered_years_group)
  .keyAccessor(function(d) {
    return d.key[0];
  })
  .valueAccessor(function(d) {
    return d.key[1];
  })
  .colorAccessor(function(d) {
    return +d.value.color;
  })
  .title(function(d) {
    return "Manager:   " + d.key[1] + "\n" +
      "FTE:  " + d.value.toolTip + "\n" +
      "Date: " + d.key[0] + "";
  })
  .rowOrdering(d3.descending);

https://jsfiddle.net/_M_M_/wkv1srhd/2/

【问题讨论】：

AFAIK 你必须根据将水平和垂直显示的单元格的数量来计算热图的宽度和高度，如in the example 所示。
你会知道我如何获取行数和列数吗？

标签： javascript d3.js dc.js

【解决方案1】：

好的，这是一种通用的方法。

设置宽度和高度的适当时间是响应preRender 和preRedraw 事件。这样，只要行数或列数发生变化，它就会发生变化。

在处理程序中，您可以遍历数据并使用Set 计算有多少行和列。

最后，将这些计数乘以您想要的大小并添加边距以获得所需的图表宽度和高度。（这与图表内部的功能相反。）

我把它放在一个可调整大小的函数中，该函数采用所需的单元格宽度和高度：

function resize_heatmap(cwid, chei) {
  return function(heatMap) {
    var rows = new Set(), cols = new Set();
    heatMap.group().all().forEach(function(kv) {
      cols.add(heatMap.keyAccessor()(kv));
      rows.add(heatMap.valueAccessor()(kv));
    });
    heatMap.width(cols.size * cwid + heatMap.margins().left + heatMap.margins().right)
      .height(rows.size * chei + heatMap.margins().top + heatMap.margins().bottom);
  };
}

使用所需的单元格宽度和高度实例化处理函数，并将其附加到热图，如下所示：

var resize = resize_heatmap(30,30);
heatMap.on('preRender', resize);

经过一些实验，我发现这不适用于.on('preRedraw')、as it should。在解决该问题之前，您必须覆盖 .redraw()：

dc.override(heatMap, 'redraw', function() {
  resize(heatMap);
  heatMap._redraw();
});

Fork of your fiddle.

【讨论】：