Question

我有一个对象数组：

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但我知道问题出在上面的代码中。关于我做错什么的任何想法？

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

0 个答案: