javascript - 使用堆叠布局时将自定义值字段映射到 x 值

Question

我成功映射了 y 值，但是在使用 stack layout 创建堆叠条形图时，我无法将 x 值映射到我的值的任意字段.我不太熟悉 Javascript 和 d3；所以我可能在这里遗漏了一些基本的东西。

我的数据数组中的一个值看起来像 { "xInit": 0, "yInit": 91 }。我想将 xInit 映射到图中的 x 并将 yInit 映射到 y。

这个有效(suggested by Bryan Clark):

var st = d3.layout
           .stack()
           .values(function (d) { return d.values; })
           .y(function (v, i) { return v.yInit; })
           .out(function (d, y0, y) { d.x = d.xInit; d.y0 = y0; d.y = y; });

这不是:

var st = d3.layout.stack()
           .values(function (d) { return d.values; })
           .y(function (v, i) { return v.yInit; })
           .x(function (v, i) { return v.xInit; });

它给出以下警告:

Unexpected value translate(NaN,0) parsing transform attribute.
Unexpected value NaN parsing x attribute.

我在这里使用 stack.x([accessor]) 不正确吗？那我该如何使用呢？

详细信息

显示我的问题的完整示例可以作为 block 获得。基于此gist .我想根据以下数据创建堆积条形图:

initialData = [ {
          "name": "apples",
          "values": [{ "xInit": 0, "yInit": 91 }, { "xInit": 1, "yInit": 290 }, { "xInit": 2, "yInit": 120 }]
      },{
          "name": "oranges",
          "values": [{ "xInit": 0, "yInit": 9 }, { "xInit": 1, "yInit": 49 }, { "xInit": 2, "yInit": 37 }]
      }];

Answer 1

我不是很清楚你在这里想做什么，所以这不是一个完整的解决方案，但我会帮助你开始。

您可以使用 out() 函数操作传出数据以获得您正在寻找的 x 坐标，从而生成您的图表。

var st = d3.layout.stack()
        .values(function(d) { return d.values; })
        .out(function(d, y0, y) {d.x = d.xInit; d.y0 = y0; d.y = y; })
        .y(function (v, i) { return v.yInit; });