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

Question

要求

我正在尝试创建一个热图来指示事件在一周中的几个小时内发生的频率。 Y 轴是星期几，X 轴是一天中的几个小时。我想在 X 轴上查看一天中的所有时间，即使是那些没有任何对应频率的时间。

问题

不幸的是，我无法找到显示一天中所有时间的方法。 Crossfilter 仅包括一周中具有相应频率的一天中的几个小时。

当前图形结果

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

代码

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() and .rows() 指定 x 和 y 域。

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

在您的例子中，由于您正在为 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.

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

dc.js: show all domain x values in heatmap

heatmap

crossfilter

dc.js

使用日期名称