2

我正在尝试使用堆栈布局创建堆栈条形图。

只有当我传递一个 x,y 坐标数组时，我才能让它工作。但我希望能够向其中添加元数据，例如系列标题。

我已经阅读了文档（https://github.com/mbostock/d3/wiki/Stack-Layout），并查看了它是如何在蒸汽图上完成的（在 D3 Streamgraph 中正确使用 stack.values([accessor])？）。这些示例的问题在于它们没有考虑 y 比例等因素，因此难以建立 yStackMax 等变量。

我还需要尽早将数据传递给 stack() 函数，因为我计划在刷新数据时重绘这个和其他东西。简而言之，而不是：

var data = [
   [
      { "x": 0, "y":  91},
      { "x": 1, "y": 290}
   ],
  [
      { "x": 0, "y":  9},
      { "x": 1, "y": 49}
   ],
   [
      { "x": 0, "y": 10},
      { "x": 1, "y": 25}
    ]
];


var layers = d3.layout.stack()(data);

var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

...这行得通，我希望能够做到：

var data = [
  {
    "name": "apples",
    "values": [
      { "x": 0, "y":  91},
      { "x": 1, "y": 290}
    ]
  },
  {  
    "name": "oranges",
    "values": [
      { "x": 0, "y":  9},
      { "x": 1, "y": 49}
    ]
  },
  {  
    "name": "potatoes",
    "values": [
      { "x": 0, "y": 10},
      { "x": 1, "y": 25}
    ]
  }
];

var layers = d3.layout.stack()(data).values(function(d) { return d.values; });

var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

...这是行不通的。

这是工作代码小提琴：http: //jsfiddle.net/StephanTual/E6FeP/

这是不起作用的代码的小提琴：http: //jsfiddle.net/StephanTual/Tnj8W/

4

1 回答 1

4

这是一个更新的小提琴。

关键部分是：

// define the accessor before adding in the data
var layers = d3.layout.stack().values(function(d) { return d.values; })(data);

var yStackMax = d3.max(layers, function(layer) { return d3.max(layer.values, function(d) { return d.y0 + d.y; }); });

然后我根据需要进行了一些其他调整以访问.values.

于 2013-08-05T18:38:46.173 回答