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）

任何sugestions如何解决这个问题？

Answer 1

您需要将每个列作为单独的堆栈处理，并将它们放在图表中。这个小提琴：https://jsfiddle.net/gwhn1sgv/2/显示了如何。

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

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异常堆积条形图

1 个答案: