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。

HeatMap固定框的大小（根据行和列调整HeatMap的大小）

1 个答案: