NVD3.js：具有两个 y 轴的堆叠和分组条形图答案

【问题标题】：NVD3.js: Stacked and grouped bar chart with two y-axisNVD3.js：具有两个 y 轴的堆叠和分组条形图
【发布时间】：2014-07-17 08:10:19
【问题描述】：

我正在使用NVD3.js 并想创建以下图表：

如您所见 - 条形图堆叠，两轴并按x轴分组

使用multiChart 我得到了：

它是堆叠的，两轴，但没有按 x 轴分组。

也许我需要使用不同的图表类型 - 不是 multiChart，但我没有找到两个 y 轴的条形图。

1) 我如何使用NVD3.js 来实现这一点？

2）如果在NVD3.js不能做，那我可以适当整合哪个解决方案？

谢谢！

【问题讨论】：

NVD3 是在 D3 中实现的常用图表类型的集合。如果你想要一种不常见的图表类型，比如这个，你必须自己使用 D3 代码。如果您想使用 NVD3 样式和其他功能，您可以调整它们的源代码，但您需要完全了解如何在 D3 中制作堆叠和分组条形图。有大量教程和示例可供您探索学习。
很遗憾，但如果没有更好的答案，那就创建答案，这样就不会浪费声誉（赏金），我可以在 6 天内接受您的答案。
我会等着看是否有其他人有更好的适应 NVD3 的选择——或者想逐步解释基本的 d3 代码！
由于我的问题没有任何帮助，并且您只是参与讨论的人 - 请创建答案，以便我接受它并且声誉不会丢失。
我强烈建议使用 dimple.js dimplejs.org/… 进行更高级的使用。如果示例不清楚，我可以使用您的数据创建一个示例。

标签： d3.js nvd3.js

【解决方案1】：

引用他们的网站的话，NVD3 Javascript 库是“尝试构建可重复使用的图表和图表组件”。为了强调图表的可重用性，它的创建者做出了几个关键决定：

他们专注于实施标准图表设计（折线图、条形图、散点图），但以灵活的交互式方式实施。
他们对所有图表都使用了相同的数据结构要求：
- 主数据数组包含多个数据系列，每个系列代表数据的一个逻辑分组；
- 每个系列都是包含两个或多个变量的单个数据对象的数组。
所有图表都具有相似的风格并重用重要的代码片段。

NVD3 库允许您创建分组条形图或堆叠条形图，甚至a chart that interactively animates between the two。

调整该图表以创建堆叠和分组条形图并不是一项简单的任务，部分原因是数据结构会有所不同。您将需要一个三级数据结构（series > sub-series > datapoints，代表groups > stacks > bars），而不是 NVD3 使用的两级（series > datapoints）结构。

然而，一切都没有丢失。 NVD3 建立在d3 Javascript library 之上。 D3 更加灵活和开放；它没有定义特定的图表类型，它定义了一种操作网页以使其与您的数据匹配的方式。您可以使用它来创建可以使用 HTML 或 SVG 绘制的任何类型的图表。但当然，这意味着工作量要大得多，因为您必须明确地创建图表的所有部分，并自己做出所有设计决策！

我强烈建议，如果您想使用 d3，请从 tutorials list 或 introductory books 之一中的基础开始。但是，您还需要查看gallery of examples，从那里您会发现以下图表会特别感兴趣：

一旦你熟悉了在 d3 中构建图表，你可能想打开 NVD3 源代码，看看是否可以借用他们的一些可重用代码组件（请务必尊重他们的licence terms，当然）。但是，作为初学者，我不建议这样做——它有很多代码，并且使用了很多复杂的技术来将所有部分组合在一起。

【讨论】：