Javascript 具有不同堆叠级别的D3堆叠条形图

是否可以在D3中构建具有不同堆叠级别的堆叠条形图

我一直在读关于它的书，但是我只找到了有相同层叠层次的例子

换句话说,， 而不是这个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}
        ]
      }
    ];

我读到-

---

这相当容易，具体取决于您如何设计将数据加载到图表中的方式

基本上，这一过程将是：

将

data（）

函数与layers变量一起使用，这样就可以分别处理每个数据集

使用步骤1结果的

enter（）

函数添加

g

元素

再次调用

data（）

，这次使用附加数据的

值

（

.data（函数（d）{return d.values；}）

）

使用步骤3结果的

enter（）

功能生成条形图

请注意，要使内容实际堆叠，您需要跟踪每个x位置的当前堆叠高度。设置矩形的

y

属性时，只需生成一个零数组并更新索引

d.x

处的值

---

显示快速样本。要使此示例充分发挥作用，您必须添加轴/刻度和所有额外的东西。

嘿，谢谢您的帮助。。我第一次看到它的时候就错过了。所以基本上是做同样的事情。。它正在堆叠所有x:0的x:1和x:2。。。那不是我想要的。。。我想把橙子的值叠加在一个叠加条中…在上面的示例输入中，我想有两个叠加条，一个有11、10和10，而另一个只有一个值9。在代码中，有3个堆叠的条形图，一个是11和9，另一个是10，最后一个是10。