Javascript 具有对象阵列的单个堆叠条

当我尝试使用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)

如我所见，这适用于上述

数据

。检查这个

但当我改变我的数据时，会发生这样的事情。我犯了个错误

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]
}]

---

那么，如何使用上述数据显示条形图呢？

我认为最简单的方法是根据

数据2

创建一个类似于

数据的新数据数组，而不是使用堆栈生成器。例如，使用
reduce
：


var rawData=[{
“pop1”：20，
“计数”：[1,3,4]
}, {
“pop2”：20，
“计数”：[1,3]
}, {
“pop3”：50，
“计数”：[1,3,2]
}, {
“pop4”：20，
“计数”：[1,4,3]
}]
var数据=原始数据.reduce（函数（acc，cur）{
for（当前的变量键）{
如果（键！=“计数”）{
acc[0][key]=cur[key]；
}
}
返回acc
}, [{}]);
console.log（数据）