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多級數據的折線圖

回答

相關問題