4

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

我的数据数组中的一个值看起来像{ "xInit": 0, "yInit": 91 }. 我想在图中映射xInit到.xyInity

这有效（由 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; });

这有效，x 坐标取自 value.xInit

这不会：

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; });

失败！ value.x 返回 NaN

它给出以下警告：

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

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

细节

显示我的问题的完整示例可作为基于此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 }]
      }];
4

1 回答 1

2

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

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; });
于 2012-07-16T21:09:46.653 回答