D3 不寻常的堆叠条形图

Question

我需要做一个不寻常的堆叠条形图，实际上，我不知道该怎么做。

总的来说听起来很简单：

我有一个 CSV 文件，其中包含不同的值，可以是 int 或 string。每行具有相同数量的值。

我现在需要做一个堆叠条形图谁做以下事情：

-每列一个柱 - 每列需要具有相同的高度（导致每列的条目数量相同）并且每个柱需要有不同数量的堆栈，每个存在的不同值对应一个堆栈。（一个值出现的次数越多，这个栈就应该越大）

CSV 文件示例为：

Day, Value
Mo, 5
Mo, 3
Tu, 5
Tu, 6

所以对于 Day 行，我需要 2 个高度相同的堆栈，而对于 Value 行，我需要 3 个堆栈，其中一个是 1/2 高度，另外两个每个 1/4。

这就是我遇到的问题。我在互联网上可以找到的每个示例都适用于每个条的相同数量的堆栈。（例如：https://bl.ocks.org/mbostock/3886394 or https://bl.ocks.org/mbostock/1134768）

有什么建议可以解决这个问题吗？

Answer 1

您需要将每一列作为一个单独的堆栈来处理，并将它们放置在您的图表中。这个 fiddle: https://jsfiddle.net/gwhn1sgv/2/ 展示了如何。

i的数据。 e.第一列需要转换为这样的直方图：

var column = 'Day';
var histo = { Mo: 2, Tu: 2 }

然后就可以堆叠变形了：

var keys = Object.keys(histo);
var stack = d3.stack()
  .keys(keys)([histo])
  //unpack the column
  .map((d, i) => {
    return {key: keys[i], data: d[0]}
  });

所以它们看起来像这样：

var stack = [
    { key: 'Mo', data: [0, 2] },
    { key: 'Tu', data: [2, 4] }
]

如果你有带秤

var x = d3.scaleBand()
   .domain(data.columns);

您可以在 x(column):

处构建条形图列

chart.append('g')
  .selectAll('rect')
  .data(stack)
  .enter().append('rect')
     // position in the x-axis
    .attr('x', x(column))
    .attr('y', d => y(d.data[0]))
    .attr("height", d => y(d.data[1]) - y(d.data[0]))
    .attr("width", x.bandwidth());

D3 不寻常的堆叠条形图

D3 unusual stacked bar chart

javascript

d3.js

stacked