Gráfico de líneas D3 con arbitrariamente muchas líneas (y un formato de datos específico)

Question

Tengo algunos problemas con D3 y estoy llegando al final de mi ingenio. Básicamente, tengo un gráfico de series de tiempo con arbitrariamente muchas líneas y los datos de origen no se pueden modificar por conveniencia antes de la mano (pero se pueden manipular desde el lado del cliente).

Los datos se formatea thusly (con muchas etiquetas de forma arbitraria):

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 
    }, 
    .... 

he intentado algo así como:

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

que parece incapaz de acceder al valor correcto a través del descriptor de acceso y como se Obtengo un "error: análisis de problemas" y una gran cantidad de "NaNL3.384615384615385, NaNL6.76923076923077, NaNL10.153846153846155". Sin embargo, si codigo el valor de la etiqueta a través de algo como:

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

Funciona bien, pero solo para una línea. ¿Alguien podría ofrecer ayuda?

Answer 1

me gustaría empezar por transformar los datos en conjuntos paralelos del mismo formato: (. Puede utilizar d3.keys para calcular los nombres de las series de forma automática, en lugar de-codificación duro como anteriormente)

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

Ahora series es una matriz de matrices. Una sola serie, tales como label1, se verá algo como esto:

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

Debido a que tienen el mismo formato, se puede utilizar el mismo generador de líneas para todas las series:

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

Y del mismo modo el anidado array se presta bien a una combinación de datos para crear los elementos de ruta necesarios:

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

Answer 2

Intente incorporar parseFloat para asegurarse de que se está convirtiendo en flotadores y no en ints implícitamente. Si eso aún no funciona, intente tomar subseries de sus cadenas (recorte algo de precisión) hasta que funcione.