带有 CSV 多级数据的 D3.js 折线图答案

【问题标题】：D3.js line chart with CSV multi-level data带有 CSV 多级数据的 D3.js 折线图
【发布时间】：2015-02-24 18:54:22
【问题描述】：

可能是一个初学者的问题，但是在查看了大量的示例之后，我无法理解如何使用 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

我想做的是创建：

每个名称一个折线图
折线图中每个数字都有一条路径/线。
X 轴为年份

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

如果答案很明显并且您必须阅读此内容，我很抱歉，但如果您能引导我朝着正确的方向前进，我将非常感激！

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

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

【问题讨论】：

我讨厌只留下链接，但完整的解释可能有点长。 here 解释了您可能正在寻找的示例，here 是一个实际示例

标签： csv d3.js data-visualization linechart

【解决方案1】：

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

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

这会将数据转换为您需要的形式；即一个 2D 数组（更准确地说是一个对象数组，每个对象中有一个较低级别的数组），其中顶层有 2 个成员（“超人”和“蝙蝠侠”），每个成员都包含一行的记录。

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

【讨论】：