如何在dc.js中创建瀑布图

Question

我正在尝试使用dc.js创建瀑布图，看来瀑布图的示例并不多。如何从http://bl.ocks.org/chucklam/f3c7b3e3709a0afd5d57中获得与此瀑布图相似的瀑布图？

PS：一旦获得图表提示，便会以适当的解决方案更新答案。我正在尝试创建更高级的图表，这些图表可以作为dc.js示例的一部分进行扩展。

Answer 1

这可能是对该线程的较晚答复。我要添加一个答案，以防其他人（除原始海报之外）遇到相同的问题。代表我的答案的代码在GitHub上。我将在此处进行解释，因为我的git repo仍然缺少适当的自述文件（抱歉）。

诀窍是创建两个（交叉过滤器）组，一个包含您的真实数据，另一个包含一个虚拟数据。该虚拟数据应该为瀑布图中的列提供支持（您也可以将它们视为数据每一列的阴影）。此虚拟数据的值遵循以下公式：

Dummy value of current column = previous dummy value + previous real data value

尽管上面的公式没有考虑第一列和最后一列。如果在循环中使用公式，则应手动设置它们（分别在循环之前和之后）。第一列的虚拟值应为0，最后一个等于实际数据中的最后一个值。另外，必须在图表上进行一些修饰以使虚拟列不可见（即使在选中/取消选中时也是如此）。 git代码中也提供了此功能。