Question

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

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

我已经阅读了文档（https://github.com/mbostock/d3/wiki/Stack-Layout），并了解了它是如何在steamgraph（Correct usage of stack.values([accessor]) in D3 Streamgraph?）上完成的。这些示例的问题在于它们没有考虑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/

Answer 1

这是一个更新的fiddle。

关键部分是：

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

如何为堆积条形图定义值访问器？

1 个答案: