来自Array数据的D3堆栈图表

Question

In all the examples to generate a Stacked Chart using D3 (v4) I've seen so far, the input is an Array of JSON objects, 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}
];

How can I generate a stack if I have an array (with implicit keys) instead? Something like...

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

The reason for such an input structure is that, I have to really draw several stacks with the data that looks like this:

// 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

The API is clear: you have to pass an array to the stack generator. According to it, d3.stack() ...

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

Right now you have an object , not an array.

So, I believe the best solution here is simply converting that object to the array structure expected by the stack generator, which you shared in your very question (the first array).

This involves just vanilla JavaScript. This is an example, intentionally verbose so you can see the steps:

 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) 

It will generate this array:

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

Which has the same structure of the first array in your question.

You can change month and value + i to the key names you want.

Answer 2

Using arrays in order to render stack bars (or other stack representations) can be achieved when data is an array by generating the keys object to contain the indexes of the values as such:

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')

In the following case:

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

data is the entire object and the keys are ['apples', 'bannanas', 'cherries', 'dates'] .

When using an array [3840, 1920, 960, 400] the keys should be [0,1,2,3]