CODEWITHSUNDEEP
javascriptd3.jsdc.js
M_M
M_M

Reputation: 173

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

Would like my heatMap to adjust its size based on how many rows and columns, so that that the box sizes stay at a fixed size.

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/

Upvotes: 1

Views: 804

Answers (1)

Gordon
Gordon

Reputation: 20120

Okay, here is a general-purpose way to do it.

The appropriate time to set the width and height is in response to the preRender and preRedraw events. This way it will change whenever the number of rows or columns changes.

In the handler, you can iterate through the data and count how many rows and columns there are using a Set.

Finally, multiply these counts times the size you want and add the margins to get the desired width and height of the chart. (This is the inverse of what the chart does inside.)

I put it in a resizable function which takes the desired cell width and height:

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);
  };
}

Instantiate the handler function with the desired cell width and height, and attach it to the heatmap like this:

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

After some experimentation, I found out this doesn't work for .on('preRedraw'), as it should. Until that issue is fixed, you have to override .redraw(): 

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

Fork of your fiddle.

Upvotes: 1

Related Questions