Grafico a linee D3 con arbitrariamente molte linee (e uno specifico formato di dati)

Question

Ho qualche problema con D3 e sto colpendo la mia testa di spirito. Essenzialmente ho un grafico di serie temporali con molte linee arbitrarie e i dati di origine non possono essere modificati per comodità prima della mano (ma possono essere manipolati lato client).

I dati sono formattati questa convenzione (con un numero arbitrario di etichette):

object = [ 
{ 
    "_id": "2012-08-01T05:00:00", 
    "value": { 
    "label1": 1.1208746110529344, 
    "label2": 0.00977592175310571 
    } 
}, 
{ 
    "_id": "2012-08-15T05:00:00", 
    "value": { 
    "label1": 0.7218920737863477, 
    "label2": 0.6250727456677252 
    }, 
    .... 

ho provato qualcosa di simile:

var vis = d3.select.(element) 
    .append("svg:svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("svg:g"); 

var line = d3.svg.line() 
    .x(function(data) {return x(new Date(data._id));}) 
    .y(function(data) {return y(data.value);}); 


vis.append("svg:path") 
    .attr("d", line(object)) 
    .attr("stroke", "black"); 

che sembra in grado di accedere al valore corretto tramite il y di accesso come Ricevo un "errore: analisi dei problemi" e un sacco di "NaNL3.384615384615385, NaNL6.76923076923077, NaNL10.153846153846155". Tuttavia se ho hardcode il valore dell'etichetta tramite qualcosa del tipo:

.y(function(data) {return y(data.value.label1);}); 

Funziona bene, ma solo per una linea. Qualcuno potrebbe offrire aiuto?

Answer 1

mi piacerebbe iniziare trasformando i dati in file parallele dello stesso formato: (. È possibile utilizzare d3.keys per calcolare automaticamente i nomi delle serie, piuttosto che hard-codifica loro come sopra)

var series = ["label1", "label2"].map(function(name) { 
    return data.map(function(d) { 
    return {date: new Date(d._id), value: d.value[name]}; 
    }); 
}); 

Ora series è una matrice di matrici. Una singola serie, come label1, sarà simile a questo:

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344}, 
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477}, 
… 

Dal momento che hanno lo stesso formato, è possibile utilizzare lo stesso generatore di linea per tutte le serie:

var line = d3.svg.line() 
    .x(function(d) {return x(d.date); }) 
    .y(function(d) {return y(d.value); }); 

E allo stesso modo la nidificato array si presta bene a un join di dati per creare gli elementi del percorso necessari:

svg.selectAll(".line") 
    .data(series) 
    .enter().append("path") 
    .attr("class", "line") 
    .attr("d", line); 

Answer 2

Provare a incorporare parseFloat per essere assolutamente sicuri che si stia convertendo in float e non in implicitamente. Se ancora non funziona, prova a prendere sottostringhe delle tue corde (taglia un po 'di precisione) finché non funziona.