d3.js - NVD3.js:具有两个 y 轴的堆叠和分组条形图

Question

我正在使用 NVD3.js 并希望创建以下图表:

如您所见 - 条形堆叠、双轴并按 x 轴分组

使用 multiChart 我得到了:

它是堆叠的，两个轴，但按 x 轴未分组。

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

1) 如何使用 NVD3.js 实现此目的？

2)如果在NVD3.js中无法完成，那么我可以正确集成哪种解决方案？

谢谢!

Answer 1

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

• 他们专注于实现标准图表设计(折线图、条形图、散点图)，但实现方式灵活、交互式。

• 他们对所有图表都使用了相同的数据结构要求:

  • 主数据数组包含多个数据系列，每个系列代表数据的一个逻辑分组；

  • 每个系列都是包含两个或多个变量的单个数据对象的数组。

• 所有的图表都具有相似的风格并重用了重要的代码片段。

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

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

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

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

• Mike Bostock's Stacked Bar Chart
• Bostock's Grouped Bar Chart of the same data
• Ali Gencay's adaptation of those examples to create a stacked, grouped bar chart

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