D3.js与CSV多级数据的折线图

可能是一个初学者的问题，但在看了大量的实例之后，我无法理解如何使用d3.nest（）或d3.map（）或其他任何必需的东西用D3.js从我的CSV文件中提取我想要的数字。D3.js与CSV多级数据的折线图

我有一个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() 
     ***???*** ; 
});

来源

2015-02-24 Torkjell Trædal

我不喜欢留下链接，但完整的解释可能会有点长。你可能要找的一个例子在这里解释（https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-multi-line-graph-with-automatic-legend-and -toggling-show - hide-lines）和一个活的例子是[here]（http://bl.ocks.org/d3noob/e99a762017060ce81c76） – d3noob 2015-02-24 19:41:24

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

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

这会将数据转换为您需要的形式;即2D阵列（更准确地说，每个对象内具有较低级别阵列的对象的阵列），其中最高级别具有2个成员（“超人”和“蝙蝠侠”），其中每个成员将包含行的记录。

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

来源

2015-02-24 19:51:37 meetamit

D3.js与CSV多级数据的折线图

回答

相关问题