D3堆积条形图与不同的堆栈级别

Question

是否可以在D3中使用不同的堆叠级别构建堆叠条形图？

我一直在阅读它，但cud只找到具有相同堆叠级别的示例。

换句话说， 而不是这个JSON -

var layers = [
      {
        "name": "apples",
        "values": [
            { "x": 0, "y": 11},
            { "x": 1, "y": 10},
            { "x": 2, "y": 10}
        ]
      },
      {  
        "name": "oranges",
        "values": [
          { "x": 0, "y": 9},
          { "x": 1, "y": 9},
          { "x": 2, "y": 9}
        ]
      }
    ];

我们可以使用 -

创建条形图吗？

var layers = [
      {
        "name": "apples",
        "values": [
            { "x": 0, "y": 11},
            { "x": 1, "y": 10},
            { "x": 2, "y": 10}
        ]
      },
      {  
        "name": "oranges",
        "values": [
          { "x": 0, "y": 9}
        ]
      }
    ];

我看了 - https://bl.ocks.org/mbostock/3886208

https://bl.ocks.org/mbostock/1134768

https://github.com/mbostock/d3/wiki/Stack-Layout

Answer 1

这很容易做到，具体取决于您如何设计数据加载到图表中。

基本上这个过程是：

1. 将data()函数与layers变量一起使用，这样您就可以单独使用每个数据集
2. 使用步骤1结果的g函数添加enter()元素
3. 再次致电data()，这次使用附加数据的values（.data(function(d){return d.values;})）
4. 使用步骤3结果的enter()函数生成条

请注意，为了实际堆叠，您需要跟踪每个x位置的当前堆叠高度。您需要做的就是生成一个零数组，并在设置矩形的d.x属性时更新索引y的值。

Fiddle显示快速示例。为了使这个成为一个完全有效的例子，你必须添加轴/比例和所有额外的东西。