Gruppendaten mit d3

Question

Ich versuche this example des Multipline-Diagramms mit d3 zu reproduzieren. Ich sage, dass ich sehr wenig d3 kenne, ich habe gerade angefangen, es zu benutzen.

Ich würde ein Diagramm erhalten, das die Daten (1995, 1996, ..., 2010) auf der X-Achse und die numerischen Werte von 0 bis 3000 auf der Y-Achse hat. Die Zeile, die die verschiedenen Datenkategorien in der CSV darstellt.

Dieser Teil meines Codes ist:

// 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)); 
    });  
}); 

Wenn ich es laufen lasse, erhalte ich die Fehlermeldung:

Fehler: Attribut d: Erwartete Anzahl "MNAN, NaNLNaN, NANL ...". attrConstant @ d3.js: 663 (anonyme Funktion) @ d3.js: 962d3_selection_each @ d3.js: 968d3_selectionPrototype.each @ d3.js: 961d3_selectionPrototype.attr @ d3.js: 652 (anonyme Funktion) @ script.js: 56 (anonyme Funktion) @ script.js: 53 (anonyme Funktion) @ d3.js: 1996event @ d3.js: 504respond @ d3.js: 1949

Das Problem ist die Funktion, ich verstehe nicht warum.

Könnte mir jemand helfen?

Hier der gesamte Code: http://plnkr.co/edit/kiU1KwdvsC7e1rrjAuCM?p=preview.

Vielen Dank.

Answer 1

Erstens Ihre CSV ist falsch:

",""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" 

Es sollte (doppelte Anführungszeichen entfernt) wurden

,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 

Zweitens

Sie müssen das Datum wie folgt analysieren:

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

Drittens

die x-Domäne wie folgt einstellen:

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

Schließlich, bevor Sie die Zeilendaten sortieren Sie Ihre Daten w.r.t. vorbei Jahre.

// 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)) ; 
}); 

Code here