2012-04-09 16 views
23

Sto provando a leggere i dati nella visualizzazione del mio calendario utilizzando JSON. Al momento funziona benissimo utilizzando un file CSV:d3 - lettura dei dati JSON invece del file 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]; }); 

}); 

Si legge i seguenti dati CSV:

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

Eventuali indicazioni su come posso leggere i seguenti dati JSON invece: {"2000-01-01":19,"2000-01-02":11......etc}

ho provato quanto segue ma non funziona per me (datareadCal.php sputa il JSON per me):

0.123.516,410617 millions
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); 

grazie

risposta

13

È possibile utilizzare d3.entries() per trasformare un oggetto letterale in una serie di coppie chiave/valore:

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 che noterete, però, è che la risultante matrice ISN 'correttamente ordinato. Puoi ordinarli in base al seguente ordine:

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

Hi Shawn, grazie per ottenere su di me su questo, ma sono ancora piuttosto perso. Stavo cercando di cambiare l'esempio del calendario d3 utilizzando i dati letti dal file CSV per usare un JSON: http://mbostock.github.com/d3/ex/calendar.html – eoin

+0

Ciao Shawn, mi ci è voluto un po 'per capire (Sto gestendo un lavoro di un giorno non programmato con la scuola serale e insegnando a me stesso i dati e la programmazione ..) ma avevi ragione, la chiave è formattare il JSON con d3.entries. Ha funzionato, ma nel mio codice ho dimenticato di abbinare l'anno del mio calendario vuoto con l'anno dei miei dati. In altre parole il mio calendario vuoto era per il 1999 ei miei dati JSON erano per il 2000. Grazie per tutto il vostro aiuto e pazienza . – eoin

6

Trasforma il tuo file .json in un file .js incluso nel tuo file html. Dentro il file .js hanno:

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

Quindi è possibile fare riferimento countsByDate .... non c'è bisogno di leggere da un file di per sé.

E si può leggere con:

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

Per inciso .... d3.js dice che è meglio impostare il vostro JSON come:

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

Grazie Ginny questo è stato davvero utile. – eoin

+1

Sembra davvero hacky – circuitry

Problemi correlati