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

2023年2月4日 166次阅读

我成功映射了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])吗？那我该怎么用呢？

细节

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

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

最佳答案 我不太清楚你在这里要做什么,所以这不是一个完整的解决方案,但我会帮助你开始.

您可以使用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; });
点赞