热图固定框大小（根据行和列调整热图大小）

Question

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

热图：

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.

热图固定框大小（根据行和列调整热图大小）

HeatMap fixed box size (resize heatMap size based on rows and columns)

javascript

d3.js

dc.js