D3.js CSV 多级数据折线图

Question

可能是一个初学者问题，但在看了很多例子之后，我无法理解如何 d3.nest() 或 d3.map() 或任何必要的东西来拉出我想要从我的 CSV 文件中获取 D3.js.

的数字

我有一个包含以下数据的 CSV 文件：

name,year,number1,number2,number3
Superman,2003,227141296,214978953,212418250
Superman,2004,232769230,220606887,211301729
Superman,2005,192769230,220606887,211301729
Batman,2003,252873171,239836381,225174161
Batman,2004,286137492,262439880,243001175
Batman,2004,232769230,220606887,211301729
Spiderman,2006,309584667,279490239,248758932
Spiderman,2007,324081833,278022620,246734614
Spiderman,2008,294081833,278022620,246734614

我想做的是创建：

每个名字一张折线图
折线图中每个数字一个 path/line。
X 轴为年份

d3.nest() 能解决这个问题吗？在那种情况下，我是否必须为我要绘制的每条路径重复嵌套？

如果答案显而易见并且您必须阅读本文，我很抱歉，但如果您能引导我朝着正确的方向前进，我将不胜感激！

d3.csv("budsjettgrafikk.csv", function(error, data){

   data.forEach(function(d) {
       ***???***;
   })
   d3.nest()
       ***???*** ;
});

Answer 1

是的，d3.nest()就是你想要的。

d3.nest()
  .key(function(d) { return d.name; })
  .entries(data)

这会将数据转化为您需要的形式；即一个二维数组（更准确地说是一个对象数组，每个对象中都有一个较低级别的数组），其中顶层有 2 个成员（"Superman" 和 "Batman"），每个成员都包含一行记录.

要渲染线条，因为这是一个嵌套数据结构，您需要了解如何使用 nested selections。

D3.js CSV 多级数据折线图

D3.js line chart with CSV multi-level data

csv

d3.js

data-visualization

linechart