javascript - 来自数组数据的 D3 堆栈图

Question

在我目前看到的所有使用 D3 (v4) 生成堆积图的示例中，输入是一个 JSON 对象数组，like below

var data = [
  {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
  {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
  {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
  {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
];

如果我有一个数组(带有隐式键)，我如何生成一个堆栈？像...

var data = {
  "2015, 0, 1": [3840, 1920, 960, 400],
  "2015, 1, 1": [1600, 1440, 960, 400],
  "2015, 2, 1": [ 640,  960, 640, 400],
  "2015, 3, 1": [ 320,  480, 640, 400]
};

这样的输入结构的原因是，我必须真正地用看起来像这样的数据绘制几个堆栈:

// need to draw one stack per row below
var data = {
  "1": {"A":[100,200], "B":[200,300]},
  "2": {"X":[34,90], "A":[210,90], "C":[56,67]},
  "3": {"B":[50,40], "C":[0,100], "Z":[50,500], "Q":[78,87]},
  "4": {"Z":[40,50]},
  ...
}

Answer 1

API很明显:您必须将一个数组 传递给堆栈生成器。根据它，d3.stack()...

... generates a stack for the given array of data, returning an array representing each series. (emphasis mine)

现在您有一个对象，而不是数组。

因此，我认为这里最好的解决方案是将该对象简单地转换为堆栈生成器所期望的数组结构，您在您的问题中分享了这一点(第一个数组)。

这只涉及原始 JavaScript。这是一个示例，故意冗长以便您可以看到步骤:

var data = {
  "2015, 0, 1": [3840, 1920, 960, 400],
  "2015, 1, 1": [1600, 1440, 960, 400],
  "2015, 2, 1": [640, 960, 640, 400],
  "2015, 3, 1": [320, 480, 640, 400]
};

var dataArray = [];

for (var key in data) {
  var obj = {};
  obj.month = key;
  data[key].forEach(function(d, i) {
    obj["value" + i] = d;
  })
  dataArray.push(obj)
}

console.log(dataArray)

它将生成这个数组:

[
    {month: "2015, 0, 1", value0: 3840, value1: 1920, value2: 960, value3: 400},
    {month: "2015, 1, 1", value0: 1600, value1: 1440, value2: 960, value3: 400},
    {month: "2015, 2, 1", value0: 640, value1: 960, value2: 640, value3: 400},
    {month: "2015, 3, 1", value0: 320, value1: 480, value2: 640, value3: 400}
]

它与您问题中的第一个数组具有相同的结构。

您可以将 month 和 value + i 更改为您想要的键名。