Question

因为我正在尝试使用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]
}]

那么如何使用上述数据显示栏？

Answer 1

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

＆＃13;

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)

＆＃13;

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

以下是您的JSfiddle：https://jsfiddle.net/ep1z21sg/

单个堆积的条与对象的数组

1 个答案: