带有对象数组的单个堆叠条答案

【问题标题】：Single stacked bar with array of objects带有对象数组的单个堆叠条
【发布时间】：2018-01-09 04:20:14
【问题描述】：

当我尝试使用 d3.js (v4) 实现单个水平堆叠条时。此条不包含任何 x 轴和 y 轴。下面是我用来渲染图表的数据。

var data = [{
    "pop1": 20,
    "pop2": 20,
    "pop3": 50,
    "pop4": 20
}];

下面是d3栈布局方法

var stack = d3.stack()
    .keys(d3.keys(data[0]))
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone)

正如我所见，这适用于上述data。检查这个fiddle

但是当我更改我的数据时，会发生这样的事情。我遇到了错误。

var data2 = [{
    "pop1": 20,
    "count": [1, 3, 4]
},
{
    "pop2": 20,
    "count": [1, 3]
},
{
    "pop3": 50,
    "count": [1, 3, 2]
},
{
    "pop4": 20,
    "count": [1, 4, 3]
}]

那么如何使用上面的数据来展示柱子呢？

【问题讨论】：

标签： javascript arrays d3.js

【解决方案1】：

我认为最简单的替代方法是根据您的data2 创建一个类似于您的data 的新数据数组，而不是弄乱堆栈生成器。例如，使用reduce:

var rawData = [{
  "pop1": 20,
  "count": [1, 3, 4]
}, {
  "pop2": 20,
  "count": [1, 3]
}, {
  "pop3": 50,
  "count": [1, 3, 2]
}, {
  "pop4": 20,
  "count": [1, 4, 3]
}]

var data = rawData.reduce(function(acc, cur) {
  for (var key in cur) {
    if (key != "count") {
      acc[0][key] = cur[key];
    }
  }
  return acc
}, [{}]);

console.log(data)

然后，您只需要将这个新数组传递给堆栈生成器。

这是您的 JSfiddle 更改：https://jsfiddle.net/ep1z21sg/

【讨论】：