2012-04-09 24 views
23

Estoy tratando de leer datos en la visualización de mi calendario usando JSON. En el momento funciona muy bien usando un archivo CSV:d3 - leyendo datos JSON en lugar del archivo CSV

d3.csv("RSAtest.csv", function(csv) { 
    var data = d3.nest() 
    .key(function(d) { return d.date; }) 
    .rollup(function(d) { return d[0].total; }) 
    .map(csv); 

rect.filter(function(d) { return d in data; }) 
     .attr("class", function(d) { return "day q" + color(data[d]) + 
"-9"; }) 
     .select("title") 
     .text(function(d) { return d + ": " + data[d]; }); 

}); 

Se lee los siguientes datos CSV:

date,total 
2000-01-01,11 
2000-01-02,13 
. 
. 
.etc 

Cualquier punteros sobre cómo puedo leer los siguientes datos JSON en su lugar: {"2000-01-01":19,"2000-01-02":11......etc}

He intentado lo siguiente pero no funciona para mí (datareadCal.php escupe el JSON para mí):

d3.json("datareadCal.php", function(json) { 
    var data = d3.nest() 
    .key(function(d) { return d.Key; }) 
    .rollup(function(d) { return d[0].Value; }) 
    .map(json); 

gracias

Respuesta

13

Puede utilizar d3.entries() para convertir un objeto literal en una matriz de pares clave/valor:

var countsByDate = {'2000-01-01': 10, ...}; 
var dateCounts = d3.entries(countsByDate); 
console.log(JSON.stringify(dateCounts[0])); // {"key": "2000-01-01", "value": 10} 

Una cosa que usted notará, sin embargo, es que la matriz resultante ISN 't debidamente ordenado. Puede ordenarlos por orden ascendente clave de este modo:

dateCounts = dateCounts.sort(function(a, b) { 
    return d3.ascending(a.key, b.key); 
}); 
+0

Hola Shawn, gracias por conseguir de vuelta a mí en esto, pero todavía estoy bastante perdido. Estaba buscando cambiar el ejemplo del calendario d3 del uso de datos leídos del archivo CSV para usar un JSON: http://mbostock.github.com/d3/ex/calendar.html – eoin

+0

Hola Shawn, me tomó un tiempo darme cuenta (Estoy haciendo malabarismos con un trabajo diurno que no es de programación con la escuela nocturna y me enseño a mí mismo la programación de datos ...) pero tenías razón, la clave es formatear el JSON con d3.entries. Eso funcionó, pero en otro lugar en mi código olvidé hacer coincidir el año de mi marco de calendario vacío con el año de mis datos. En otras palabras, mi calendario vacío fue para 1999 y mis datos JSON fueron para 2000. Gracias por toda su ayuda y paciencia. . – eoin

6

Convierte tu archivo .json en un archivo .js que se incluye en el archivo HTML. Dentro de su archivo .js tienen:

var countsByDate = {'2000-01-01':10,...}; 

A continuación, se puede hacer referencia countsByDate .... hay necesidad de leer desde un archivo en sí.

Y se puede leer con:

var data = d3.nest() 
.key(function(d) { return d.Key; })   
.entries(json);  

Como acotación al margen .... d3.js dice que es mejor para establecer su JSON como:

var countsByDate = [ 
    {Date: '2000-01-01', Total: '10'}, 
    {Date: '2000-01-02', Total: '11'}, 
]; 
+1

Gracias Ginny esto fue realmente útil. – eoin

+1

Esto suena realmente hacky – circuitry

Cuestiones relacionadas