d3 verschachtelte Liniendiagramm

Question

Ich bin neu bei d3.js (derzeit mit d3.v4) und bin stecken geblieben versuchen, d3.nest zu verwenden, um mehrere Zeilen zu plotten.

Dies ist der Code, den ich habe:

var color = d3.scaleOrdinal().range(
'#673ab7', 
'#9c27b0', 
'#e91e63', 
'#f44336', 
'#ff5722', 
'#ff9800', 
'#ffc107', 
'#ffeb3b', 
'#cddc39', 
'#8bc34a', 
'#4caf50', 
'#009688']); 

var line = d3.line() 
    .x(function(d) { return x(d.day); }) 
    .y(function(d) { return y(d.temp); });  

d3.csv('/static/data/temp_d3.csv', function(error, data){ 
    data.forEach(function(d){ 
    d.day= +d.day, 
    d.temp= +d.temp; 
    }); 

    //nest the entries by month 
    var dataNest = d3.nest() 
    .key(function(d) {return d.month;}).sortKeys(d3.ascending) 
    .key(function(d) {return d.day;}).sortKeys(d3.ascending) 
    .entries(data); 

    //loop through each symbol/key 
    dataNest.forEach(function(d){ 
    svg.append('path') 
    .data([data]) 
    .attr('class','line') 
    .style('stroke',function() { 
     return d.color = color(d.key);}) 
    .attr('d', line); 
    }); 
});//end of read csv  

This is the graph I get, which doesn't seem like the points are sorted at all. im Format Meine Datendatei

[month,day,temp] 
[x , y ,z] 
. 
. 
[x, y, z ] 

ist und die Datei in irgendeiner Weise nicht sortiert ist. Ich möchte nach Monat und Tag nisten und sortieren und habe 12 verschiedene Linien (mit verschiedenen Farben) auf einem Grundstück. Kann mir jemand helfen? Vielen Dank.

Answer 1

Meiner Meinung nach Tag Nest nach Monat und sortieren Sie wollen, aber nicht Nest von Tag wie Sie tun zur Zeit:

var dataNest = d3.nest() 
    .key(function(d) {return d.month;}).sortKeys(d3.ascending) 
    //.key(function(d) {return d.day;}).sortKeys(d3.ascending) 
    .sortValues (function(a,b) { return a.day > b.day ? 1 : -1; }) 
    .entries(data) 
    ; 

die Linienfunktion wird dann etwas anders genannt werden müssen, wie die Daten in dem d Teil .values ​​

.attr('d', function(d) { return line (d.values); }) 

(Dies hängt natürlich von nicht mehr Temperaturen mit dem gleichen Monat und Tag, mit als auch in dem Fall, dass Sie würde Nest am Tag, aber dann braucht mehr Code, um die Temperaturen zu mitteln, die etwas komplizierter wären)

---

Um ein completist zu sein, die ich auch Ihr die Zeilen Code hinzufügen ändern würde mehr d3'ish wie so zu sein, aber das ist Code v3 ich hier bin mit (ich habe mich noch nicht aktualisiert v4)

svg.selectAll("path.line").data(dataNest, function(d) { return d.key; }) 
    .enter() 
    .append('path') 
    .attr('class','line') 
    .style('stroke',function(d) { 
     return color(d.key);}) 
    .attr('d', function(d) { return line (d.values); }) 
    ;