Javascript 如何使用d3创建堆叠条形图？

我有一个对象数组：

var data = [
  {"ORDER": 1, "apples": 3840, "bananas": 1920, "cherries": 960},
  {"ORDER": 2, "apples": 1600, "bananas": 1440, "cherries": 960},
  {"ORDER": 3, "apples":  640, "bananas":  960, "cherries": 640},
  {"ORDER": 4, "apples":  320, "bananas":  480, "cherries": 640}
];

我想创建一个堆叠条形图，以便订单位于x轴，苹果、香蕉和樱桃的总数位于y轴。 以下是我目前的代码：

x = d3.scaleOrdinal().range([0, w-50])
y = d3.scaleLinear().range([0, h-50])

var stack = d3.stack()
    .keys(["apples", "bananas", "cherries", "dates"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var series = stack(data);

 x.domain(series.map(function(d) { return d.Order; }));
 y.domain([0, d3.max(data, function(d) { return d; })]).nice();

g.append("g")
    .selectAll("g")
    .data(d3.stack()(series))
    .enter().append("g")
        .attr("fill", function(d) { return color(d.key); })
    .selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
        .attr("x", function(d) { return x(d.Order); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .attr("width", x);  

---

我还将其添加到svg中，但我知道问题出在上面的代码中。关于我做错了什么有什么想法吗？

现在有一些问题

第一，图表的数据已准备好堆叠在

系列中

：

var series = stack(data);

这：

d3.stack（）（系列）将生成一个空数组：


var数据=[
{“订单”：1，“苹果”：3840，“香蕉”：1920，“樱桃”：960}，
{“订单”：2，“苹果”：1600，“香蕉”：1440，“樱桃”：960}，
{“订单”：3，“苹果”：640，“香蕉”：960，“樱桃”：640}，
{“订单”：4，“苹果”：320，“香蕉”：480，“樱桃”：640}
];
var stack=d3.stack（）
.钥匙（[“苹果”、“香蕉”、“樱桃”）
.订单（d3.stackOrderNone）
.偏置（d3.stackOffsetNone）；
var系列=堆栈（数据）；
log（d3.stack（）（series））