d3 Вложенная строка graph

Question

Я новичок в d3.js (в настоящее время использую d3.v4) и застреваю, пытаясь использовать d3.nest для построения нескольких строк.

Это код, у меня есть:

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. Мой файл данных в формате

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

и файл не отсортирован каким-либо образом. Я хочу гнездиться и сортировать по месяцам и дням и иметь 12 разных линий (с разными цветами) на сюжете. Может ли кто-нибудь мне помочь? Благодарю.

Answer 1

На мой взгляд, вы желающей гнезда в месяц и то в день, но не гнездятся днем, как вы сейчас делаете:

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

функция линии нужно будет называться немного по-другому как данные в .values ​​части д

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

(Это, конечно, зависит от того, не имея несколько температур с тем же месяцем и днем, и в этом случае вы бы гнездо на день, как хорошо, но тогда нужно больше кода, чтобы усреднить температуру, что было бы немного сложнее)

---

Чтобы быть Completist я бы также изменить ваши добавления строк кода, чтобы быть более d3'ish, как это так, но это v3 код, я использую здесь (я не обновляли себя 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); }) 
    ;