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

Question

我正在尝试用dc.js创建一个瀑布图，似乎没有很多瀑布图的例子。如何实现类似于http://bl.ocks.org/chucklam/f3c7b3e3709a0afd5d57的瀑布图？

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

Answer 1

这可能是对该线程的延迟回复。我添加了一个答案，以防其他人(除了最初的帖子之外)遇到同样的问题。代表我答案的代码在GitHub上。我将在这里给出一个解释，因为我的git repo仍然缺乏一个适当的自述文件(抱歉)。

诀窍是创建两个(crossfilter)组，一个包含真实数据，另一个包含虚拟数据。这个虚拟数据应该作为瀑布图中的列的支持(您也可以将它们视为数据的每一列的阴影)。此虚拟数据的值遵循以下公式：

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

但是上面的公式没有考虑到第一列和最后一列。如果公式在循环中使用，则应手动设置它们(分别在循环之前和之后)。第一列的虚拟值应该是0，最后一列应该等于实际数据中的最后一个值。此外，必须对图表进行一些修饰，以使虚拟列不可见(即使在选中/取消选中时也是如此)。这个特性在git代码中也是可用的。