dc.js 热图扩展数据答案

【问题标题】：dc.js heatmap expanding datadc.js 热图扩展数据
【发布时间】：2015-01-29 19:47:55
【问题描述】：

我试图随着时间的推移显示机器状态。其中一部分是复制/自动化过去手工完成的报告。它包括根据机器的工作在 Excel 中为 2 分钟的“时间片”着色。

（对不起，没有足够的声誉来发布图片，但它是状态驱动颜色的经典热图。一些非 DC-JS 小提琴：http://jsfiddle.net/ww6Lbnc5/4/）

我能够在以下 jsfiddle 中生成我想要的大部分内容： http://jsfiddle.net/hwhfxz2t/14/

See fiddle for code.

总状态持续时间（对于选定的时间范围）显示在饼图中，然后是各个状态线，然后是人们习惯的热图。 （ZOOM 和日期选择按钮在小提琴中不起作用，但可以选择特定的数据范围或根据需要放大）。

折线图使用状态的原始表示，由进入状态的时间和持续时间组成。

为了使热图工作，我必须（我认为）获取原始数据并将其转换为单独的小块并用状态标记它们。例如，原始数据指定：
RUN 状态开始 14:30 持续 300 秒
变成：
14:30=RUN、14:31=RUN、14:32=RUN、14:33=RUN 和 14:34=RUN

第 233-297 行的代码循环遍历原始数据并生成一个新数据来执行此操作。如果在一分钟内有多个状态，则最后一个状态仍然存在。

这行得通，但似乎这段代码正是 group().reduce(add,remove,init) 中通常所做的。但在这种情况下，我需要根据状态的持续时间添加多个时隙。

另外，因为它现在使用不同的交叉过滤器，地图不会相互更新。

以下是我与此相关的问题：

我可以在不提供所有个人信息的情况下显示热图吗 '细胞'？（即基于值跨单元格，类似于表格中的行跨度）
我可以在 group().reduce() 中一次添加多个值吗？
是否有一种简单的方法可以反转 yAxis，使 0 位于顶部？
当点击热图中的一行时，它会选择一列，反之亦然？

我不确定这是否应该在 crossfilter 组中。如果是这样请忽略我的漫无边际。如果有人知道如何通过更好地分组来保持图表之间的联系，请告诉我。

--妮可

【问题讨论】：

我不认为您可以使用 group().reduce() 来执行此操作（将 14:30 的单个记录 RUN 300 秒添加到多个组，例如 14:30、14:31 ， ETC）。您可以使用 groupAll().reduce() 执行此操作，但它与 group().reduce() 有点不同，并且没有很好的文档记录。实际上，我只是整理了一个示例，说明如何使用移动平均线 Reductio 和 Crossfilter (github.com/esjewett/reductio) 来执行此操作，您可能可以将其用作非常相似的问题：gist.github.com/esjewett/8291936a4e4054342ba4（也是讨论 github.com/esjewett/reductio/issues/12跨度>

标签： dc.js crossfilter

【解决方案1】：

关于问题 3：

DC.js 热图目前不支持轴上的自定义订单功能，但有一个 pull request 已合并到开发分支中，应该很快就会向公众开放。

您可以手动编辑 dc.js 文件以将热图中的排序设置为自定义函数。在最新的 (2.0.0-beta10) 版本中，它是以下行：

rowValues.sort(d3.ascending);

因此

colValues.sort(d3.ascending);

【讨论】：