javascript - D3 异常堆积条形图

Question

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

总的来说，这听起来很简单:

我有一个包含不同值的 CSV 文件，这些值可以是整数或字符串。每行都有相同数量的值。

我现在需要制作一个堆叠条形图，它执行以下操作:

-每列一个栏 - 每列需要具有相同的高度(导致每列的条目数量相同) 每个条形都需要有不同数量的堆栈，每个存在的不同值对应一个堆栈。 (值存在的次数越多，这个堆栈就应该越大)

CSV 文件示例如下:

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

因此，对于“日”行，我需要 2 个相同高度的堆栈，对于“值”行，我需要 3 个堆栈，其中一个的高度为 1/2，另外两个各为 1/4。

这就是我遇到的问题。我在互联网上找到的每个示例都适用于每个条形的相同数量的堆栈。 (例如: https://bl.ocks.org/mbostock/3886394 或 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());