使用d3的組數據

我嘗試使用d3重現多重圖的this example。我說我知道很少d3，我剛開始使用它。使用d3的組數據

我會得到一個圖表，其中x軸上的日期（1995,1996，...，2010）以及y軸上0到3000的數值。表示csv中各種數據類型的行。

這是我的代碼部分：

// Get the data 
d3.csv("./data/df_out.csv", function(error, data) { 
    data.forEach(function(d) { 
     d.year = d.year; //parseDate(d.year); 
     d.value = +d.value; 
    }); 

    // Scale the range of the data 
    x.domain([1995, 2010]); 
    y.domain([0, 3000]); 

    // Nest the entries by death 
    var dataNest = d3.nest() 
     .key(function(d) { return d.death;}) 
     .entries(data); 

    // Loop through each symbol/key 
    dataNest.forEach(function(d) { 
     svg.append("path") 
      .attr("class", "line") 
      .attr("d", valueline(d.values)); 
    });  
});

當我運行它，我得到的錯誤：

錯誤：屬性d：預計數，「MNaN，NaNLNaN，NaNL ......」。 attrConstant @ d3.js：663（anonymous function）@ d3.js：962d3_selection_each @ d3.js：968d3_selectionPrototype.each @ d3.js：961d3_selectionPrototype.attr @ d3.js：652（anonymous function）@ script.js：56（匿名函數）@ script.js：53（匿名函數）@ d3.js：1996event @ d3.js：504respond @ d3.js：1949

問題是nest函數，我不明白爲什麼。

有人可以幫助我嗎？

在這裏輸入代碼：http://plnkr.co/edit/kiU1KwdvsC7e1rrjAuCM?p=preview。

非常感謝。

來源

2016-05-14 marielle

首先你的CSV是不正確的：

",""year"",""death"",""value""" 
"1,2003,""Acute poliomyelitis"",0" 
"2,2006,""Acute poliomyelitis"",0" 
"3,2007,""Acute poliomyelitis"",0" 
"4,2008,""Acute poliomyelitis"",0" 
"5,2009,""Acute poliomyelitis"",0" 
"6,2010,""Acute poliomyelitis"",0" 
"7,1995,""Acute poliomyelitis"",0" 
"8,1996,""Acute poliomyelitis"",0" 
"9,1997,""Acute poliomyelitis"",0" 
"10,1998,""Acute poliomyelitis"",0" 
"11,1999,""Acute poliomyelitis"",0" 
"12,2000,""Acute poliomyelitis"",0" 
"13,2001,""Acute poliomyelitis"",0" 
"14,2002,""Acute poliomyelitis"",0"

應該已經（雙引號去掉）

,year,death,value 
1,2003,Acute poliomyelitis,0 
2,2006,Acute poliomyelitis,0 
3,2007,Acute poliomyelitis,0 
4,2008,Acute poliomyelitis,0 
5,2009,Acute poliomyelitis,0 
6,2010,Acute poliomyelitis,0 
7,1995,Acute poliomyelitis,0 
8,1996,Acute poliomyelitis,0 
9,1997,Acute poliomyelitis,0 
10,1998,Acute poliomyelitis,0 
11,1999,Acute poliomyelitis,0 
12,2000,Acute poliomyelitis,0 
13,2001,Acute poliomyelitis,0 
14,2002,Acute poliomyelitis,0

其次，

您需要解析的日期是這樣的：

data.forEach(function(d) { 
    d.year = parseDate(d.year); 
    d.value = +d.value; 
});

第三

這樣設置X域：

x.domain(d3.extent(data, function(d){return d.year}));

最後傳遞線路數據之前排序數據w.r.t.年份。

// Loop through each symbol/key 
dataNest.forEach(function(d, i) { 
    d.values = d.values.sort(function(a,b){return a.year -b.year});//sort by year 
    svg.append("path") 
     .attr("class", "line") 
     .attr("d", valueline(d.values)) 
     .style("stroke", color(i)) ; 
});

工作代碼here

來源

2016-05-15 01:04:24 Cyril

感謝您的幫助。爲什麼我必須按年分類數據？ – marielle

如果一年沒有排序，那麼該行會變成鋸齒形，嘗試對該行進行註釋並親自看到效果。 – Cyril

使用d3的組數據

回答

相關問題