dc.js：在热图中显示所有域 x 值

Question

要求

我正在尝试创建一个热图，指示一周中某个时间的事件频率。在 Y 轴上，我有一周中的日子，在 X 轴上，我有一天中的时间。我想在 X 轴上查看一天中的所有时间，即使是那些没有任何相应频率的时间。

问题

很遗憾，我无法找到一种方法来显示一天中的所有时间。交叉过滤器仅包括一周中具有相应频率的一天中的几个小时。

当前图形结果

如您所见，并非一天中的所有时间都显示。

代码

let name = [
        '0', // S
        '6', // M
        '5', // T
        '4', // W
        '3', // T
        '2', // F
        '1' // S
];

this.heatmapDimension= this.data_CrossfilterObject.dimension((d) => {
            return [+d.hour, d.day + '.' + name[d.day]];
        });

this.heatmapGroup= this.heatmapDimension.group().reduceSum((d) => d));

this.giornoOraDashboardItem.chart
        .dimension(this.heatmapDimension)
        .group(this.heatmapGroup)

Answer 1

热图允许您分别使用.cols() 和.rows() 指定x 和y 域。

doesn't work for filtering out data 但它确实可以确保行/列存在。

在您的情况下，由于您正在为 y/row 维度生成一个字符串值，它看起来像：

.rows(d3.range(7).map(i => i + '.' + name[i]))
.cols(d3.range(24))

这是demo fiddle with random data。

使用日期名称

更新：由于您的意图是显示日期名称，因此这是一种方法。

日期名称：

let name = [
        'Su',
        'M',
        'Tu',
        'W',
        'Th',
        'F',
        'Sa'
];

直接在维度键访问器中使用名称（不需要数字前缀）：

const heatmapDimension= cf.dimension((d) => {
        return [d.hour, name[d.day]];
    });

以相反的顺序指定名称作为行，并禁用行排序：

.rows(name.reverse()).rowOrdering(null)

（需要颠倒顺序，因为图表的零在底部。）

New fiddle.