Question

在我下面的代码示例中，我想根据过滤组中的值数设置宽度和高度。有没有最好的方法来做到这一点？我应该跟踪群组添加/删除功能中的计数吗？

    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热图的宽度和高度？

1 个答案: