D3.js 如何生成可变宽度堆叠图表（Marimekko 图表）答案

【问题标题】：D3.js how can I generate a variable width stacked chart (Marimekko chart)D3.js 如何生成可变宽度堆叠图表（Marimekko 图表）
【发布时间】：2014-02-06 18:17:19
【问题描述】：

我想生成一个堆积条形图（类似于http://bl.ocks.org/mbostock/1134768），其中每个条形的总高度相同而宽度不同。这种图表也称为 Marimekko 图表。

到目前为止，我尝试根据 csv 文件中的值改变宽度的尝试都失败了。任何建议将不胜感激。

【问题讨论】：

表达式“每个条的总高度相同而宽度不同”并不好，因为它可以用不同的方式解释。好的，您很可能是该网站的新手，因此您在提问时犯错误是可以理解的，但我建议您练习提出好问题。
添加到@VividD 的评论：你真的希望每个条形（单个矩形）的高度相同吗？或者你的意思是每个stack的高度应该相等，这样结果就是mosaic plot？
如果我不清楚，我很抱歉。基本上，我想要一个条形图，其中堆栈的总高度相同，但堆栈中的各个矩形不是。我希望每个堆栈的宽度由数据中的值确定。我不知道该怎么说。我正在尝试创建一个类似于 Andrew Smith 在克里米亚战争期间开发的图表，其中每个条形的面积与总死亡人数成正比，每个堆叠与疾病的百分比成正比。 AmeliaBR 引用的马赛克图或多或少是我想要的。
Marimekko 图表正是我想要的。谢谢。

标签： d3.js stacked-chart marimekko-chart

【解决方案1】：

http://bl.ocks.org/mbostock/1005090 的 Marimekko 图表正是我想要的。

【讨论】：

很好的例子。这是一个非常有用的图表布局，矩形的宽度、高度和面积提供了不同的信息，但它没有很好地使用，并且似乎没有一个标准的名称。我以前从未听过“Marimekko”。但无论哪种方式，它都没有太比堆叠条形图复杂得多——您只需对水平轴和垂直轴使用堆叠计算，水平堆叠基于每组的总数和垂直堆栈基于每个类别的比例。