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 或 https://bl.ocks.org/mbostock/1134768）

有什么办法可以解决这个问题吗？

Answer 1

您需要将每一列作为单独的堆栈处理，并将它们放置在图表中。这个小提琴：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());