來自Array數據的D3堆棧圖表

Question

在所有使用D3（v4）生成堆積圖表的示例中，我到目前為止看到，輸入是一個JSON對象數組， 如下所示

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() ......

...為給定的數據數組生成一個堆棧，返回一個表示每個系列的數組。 （強調我的）

現在你有一個對象 ，而不是一個數組。

所以，我認為這里最好的解決方案就是將該對象轉換為堆棧生成器所期望的數組結構，您在這個問題中共享（第一個數組）。

這只涉及vanilla 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更改為所需的鍵名稱。

Answer 2

當數據是數組時，通過生成鍵對象以包含值的索引，可以使用數組來渲染堆棧條（或其他堆棧表示）：

const serverData = {
  "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]
};

const serverDataKeys = Object.keys(serverData)
const data = serverDataKeys.map(key => serverData[key]);

/**
data = [
 [3840, 1920, 960, 400],
 [1600, 1440, 960, 400],
 [640, 960, 640, 400],
 [320, 480, 640, 400]
]
*/

const keys = serverData[serverDataKeys[0]].map( (d, index) => index);

/** keys:  [0, 1, 2, 3] */

svg.append('g')
  .selectAll('g')
  .data(d3.stack().keys(keys)(data))
  .enter().append('g')

在以下情況中：

{month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}

數據是整個對象，鍵是['apples', 'bannanas', 'cherries', 'dates'] 。

當使用數組[3840, 1920, 960, 400] ，鍵應為[0,1,2,3]