Javascript 数组数据的D3堆栈图

到目前为止，在所有使用D3（v4）生成堆叠图表的示例中，输入是一个JSON对象数组

var数据=[
{月份：新日期（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数据={
"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]
};

这种输入结构的原因是，我必须用如下数据绘制几个堆栈：

//需要在下面每行绘制一个堆栈
风险值数据={
“1”：{“A”：[100200]，“B”：[200300]}，
“2”：{“X”：[34,90]，“A”：[210,90]，“C”：[56,67]}，
“3”：{“B”：[50,40]，“C”：[0100]，“Z”：[50500]，“Q”：[78,87]}，
“4”：{“Z”：[40,50]}，
...
}

问题很清楚：必须向堆栈生成器传递一个数组。根据它，

d3.stack（）

。。。为给定的数据数组生成堆栈，返回表示每个序列的数组。（强调矿山）

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

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

这只涉及普通JavaScript。这是一个示例，有意详细说明，以便您可以看到以下步骤：

var数据={
"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输入数据）{
var obj={}；
obj.month=键；
数据[key].forEach（函数（d，i）{
obj[“值”+i]=d；
})
dataArray.push（obj）
}
console.log（dataArray）

当数据是数组时，可以通过生成包含值索引的keys对象来实现使用数组来呈现堆栈条（或其他堆栈表示）：

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

使用数组时，键应为

[0,1,2,3]