HeatMap固定框大小(根据行和列调整heatMap大小)

Question

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

heatMap：

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/

Answer 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。