d3.js使用nest转换数据

d3.js convert data using nest

本文关键字：转换 数据 nest 使用 js d3      更新时间：2023-09-26

我第一次尝试d3.js，并尝试堆叠到分组的条形图示例。

我的数据格式如下：

var data = [
  {"year":2015, values:[1,2,3]},
  {"year":2016, values:[10,20,30]},
  {"year":2017, values:[100,200,300]}
];

我希望x轴是年，y轴是值。

我在确定要使用api的哪些部分时遇到了问题。我使用嵌套、地图还是同时使用？

我需要将数据绘制为值1（1,10100）、值2（2,20200）和值3（3,30300）

感谢

您的数据如下

var data = [
  {"year":2015, values:[1,2,3]},
  {"year":2016, values:[10,20,30]},
  {"year":2017, values:[100,200,300]}
];

需要一个paser来解析你的日期

 parse = d3.time.format("%Y").parse;

下一组数据

//[0,1,2] index of the array so that the y can be calculated as d.values[grp]..here grp will be group which will have value 0 1 2
var newData = d3.layout.stack()([0,1,2].map(function(grp) {
    return data.map(function(d) {
      return {x: parse("" +d.year), y: +d.values[grp]};
    });
  }));

这将使newData成为您希望的格式：

[[{"x":"2014-12-31T18:30:00.000Z","y":1,"y0":0},
{"x":"2015-12-31T18:30:00.000Z","y":10,"y0":0},
{"x":"2016-12-31T18:30:00.000Z","y":100,"y0":0}],
[{"x":"2014-12-31T18:30:00.000Z","y":2,"y0":1},
{"x":"2015-12-31T18:30:00.000Z","y":20,"y0":10},
{"x":"2016-12-31T18:30:00.000Z","y":200,"y0":100}],
[{"x":"2014-12-31T18:30:00.000Z","y":3,"y0":3},
{"x":"2015-12-31T18:30:00.000Z","y":30,"y0":30},
{"x":"2016-12-31T18:30:00.000Z","y":300,"y0":300}]]

希望这能有所帮助！

此处为工作样本

相关文章：