使用 d3.layout.stack() 从图层访问自定义坐标

Question

我有以下形式的数据数组：

_data = [
    {key: <String>, values: [<number>...]}
]

如果每个 JSON 对象中的 'values' 变量是一个 JSON 坐标数组（即 "x: ?, y: ?"），我可以只使用以下内容：

d3.layout.stack()
    .values(function(d) {
        return d.values;
    });

相反，我需要从每一层的值数组中读取 x 作为值数组中的索引，并将 y 作为数字。像这样：

_data = [
    {key: "oranges", values: [5, 6, 8]},
    {key: "bananas", values: [2, 1, 9]}
]

becomes

"oranges": (0, 5), (1, 6), (2, 8);
"bananas": (0, 2), (1, 1), (2, 9);

如何做到这一点？

Answer 1

这是您要找的吗？

var data = [
    {key: "oranges", values: [5, 6, 8]},
    {key: "bananas", values: [2, 1, 9]}
];

var newData = [];
var fruit;
var coords;
for (var i = 0; i < data.length; i++) {
  coords = [];
  for (var x = 0; x < data[i].values.length; x++) {
    coords.push([x, data[i].values[x]]);
  }

  fruit = {};
  fruit[data[i].key] = coords;
  newData.push(fruit);
}

alert(JSON.stringify(newData));

或者类似这样的东西？在需要的时候只格式化需要的数组？

d3.layout.stack()
    .values(function(d) {
      var coords = [];
      for (var x = 0; x < d.values.length; x++) {
        coords.push([x, d.values[x]]);
      }
      return coords;
    });

Answer 2

如果我对你的问题的理解正确，那么你正在寻找合适的访问器函数来从 D3 的堆栈布局中访问你的特定数据格式。以下代码应该可以满足您的需求：

d3.layout.stack()
    .values(function(d) {
        return d.values.map(function(y, i) {
            return { "x": i, "y": y };
        });
    });

对 .map() 的调用将转换您的 data.values 数组和 return 由具有 x 和 y 坐标设置为值的对象组成的数组你指定了。

使用 d3.layout.stack() 从图层访问自定义坐标

Accessing custom coordinates from a layer with d3.layout.stack()

javascript

accessor

d3.js