如何使用 crossfilter 和 dc.js 开发分组堆栈条形图答案

【问题标题】：how to develop grouped stack bar chart using crossfilter and dc.js如何使用 crossfilter 和 dc.js 开发分组堆栈条形图
【发布时间】：2018-08-02 08:51:31
【问题描述】：

stackedbarchart.width(460)
                .height(250)
                .margins({top: 5, right: 5, bottom: 20, left: 10})
                .dimension(stackedbarchartDimension)
                .group(stackedbarchartGroup)
                .stack(stackedbarchartGroup_stack)
                .stack(stackedbarchartGroup_stack2)
                .x(d3.scale.ordinal())
                .xUnits(dc.units.ordinal)

请发布任何使用 dc.js 的“分组堆积条形图”的工作示例。

【问题讨论】：

嗨@Ashutosh，对不起，这是一个错误的问题。我删除了一些可能会引起愤怒和否决/关闭投票的模糊标签。我不确定“传递数值”是什么意思 - 这些方法 take a group and an optional name and accessor 作为参数。网站上有at least one 或two 的堆叠条示例。
我相信您可以找到更多示例 - 只需 google dc.js stacked bar！
@Gordon 感谢您的回复。但是，我不需要堆积条形图需要分组堆积条形图。示例屏幕截图，我添加并编辑了问题。请检查并分享分组堆积条形图的任何工作示例。
知道了——那作为一个 SO 问题确实很有意义，尽管搜索并找到我在下面给出的答案并不难。

标签： dc.js crossfilter

【解决方案1】：

这还不是核心库的一部分，但是您可以使用一个活动的拉取请求：

https://github.com/dc-js/dc.js/pull/1459

分支上有构建版本，所以如果你使用npm，你可以指定依赖

"dc": "git://github.com/dc-js/dc.js.git#grouped-stacked-3",

或者只是克隆 repo 并使用 grouped-stacked-3 分支。

该分支包含以下示例：

web/examples/bar-grouped-multi.html
web/examples/bar-grouped.html

编辑：这太疯狂了，我看到它仍然没有分组+堆叠条的示例。我会看看我能不能解决这个问题；在那之前我认为this plunkr 是最好的例子

【讨论】：

谢谢@Gordan。但是，这不是我所需要的完美。您可以检查屏幕截图。无论您共享什么，我都已经检查了该分组图表。请分享分组堆积条形图的任何工作示例
这有什么问题？我不知道任何其他实现，抱歉。
我不知道，你怎么不明白我的意思。应该有两级嵌套维度并在每个部分中分组，您可以在屏幕截图中查看。最好查看此链接dimplejs.org/…（堆叠分组条形图示例）
检查示例 plunkr。它既是分组的又是堆叠的。也许组之间的差距应该更大，但是的，两者都是。我明白你的意思了！
谢谢。再次，我检查了 plunkr。有单独的图表，堆叠条形图或分组条形图。我只需要在一个图表中同时使用（分组和堆叠）这就是为什么我将图表名称写为分组堆叠条形图并共享屏幕截图。