如何根据过滤后的组设置dcjs热图的宽度和高度？

Question

在下面的代码示例中，我想根据筛选组中的值数量设置宽度和高度。有没有最好的方法来做到这一点？我应该在组 add/remove 函数中跟踪计数吗？

    myHeatMap
        .width(45 * 20)
        .height(45 * 30)
        .dimension(heatDim)
        .group(heatGroup)
        .title(function (d) {
            return "Value: " + d.value;
        })
        .keyAccessor(function (d) { return d.key[0]; })
        .valueAccessor(function (d) { return d.key[1]; })
        .colorAccessor(function (d) { return d.value; })
        .colors(["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"])
        .calculateColorDomain();

Answer 1

这是一个有趣的问题。在一般情况下，人们会希望热图在行数或列数发生变化时改变大小。

如果您不关心这一点，我认为对元素进行计数是您能做的最好的事情，d3.set 一个简单的方法可以做到这一点：

var data = heatGroup.all();
var ncols = d3.set(data.map(function(x) { return x.key[0]; })).size();
var nrows = d3.set(data.map(function(x) { return x.key[1]; })).size();

myHeatMap.width(ncols*45).height(nrows*45)

如果您想查看更一般的案例，请随时 file a feature request，或者更好的是，提交 PR。热图已经在内部做类似的事情，尽管它不需要计算唯一集，因为它依赖于序数尺度。

如何根据过滤后的组设置dcjs热图的宽度和高度？

How to set the width and height of a dcjs Heatmap based on the filtered group?

crossfilter

dc.js