2012-04-09 17 views
23

Próbuję odczytać dane do mojej wizualizacji kalendarza za pomocą JSON. Na tej chwili działa świetnie przy użyciu pliku csv:d3 - odczyt danych JSON zamiast pliku 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]; }); 

}); 

odczytuje następujące dane CSV:

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

Wszelkie wskazówki, w jaki sposób można odczytać następujące dane JSON Zamiast: {"2000-01-01":19,"2000-01-02":11......etc}

Próbowałem następujące czynności, ale to nie działa dla mnie (datareadCal.php pluje out the JSON dla mnie):

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

dzięki

Odpowiedz

13

Można użyć d3.entries() obrócić obiekt dosłownego na tablicę par klucz/wartość:

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

Jedno Zauważysz jednak to, że uzyskany ISN array właściwie posortowane. Możesz sortować je według klucza rosnącego w następujący sposób:

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

Hi Shawn, dzięki za uzyskanie wróć do mnie, ale wciąż jestem całkiem zagubiony. Chciałem zmienić przykład kalendarza d3, używając danych odczytanych z pliku CSV do użycia JSON: http://mbostock.github.com/d3/ex/calendar.html – eoin

+0

Cześć Shawn, zajęło mi trochę czasu (Żongluję niezwiązaną z programowaniem pracą dzienną ze szkołą wieczorową i uczę się wizualizacji danych i programowania ...), ale miałeś rację, kluczem jest sformatowanie JSON-a za pomocą d3.entries. To zadziałało, ale gdzie indziej w moim kodzie zapomniałem dopasować rok mojej pustej ramki kalendarza do roku moich danych. Innymi słowy mój pusty kalendarz był na 1999 rok, a moje dane JSON były na 2000. Dzięki za całą pomoc i cierpliwość . – eoin

6

Zmień plik .json w plik .js zawarty w pliku html. Wewnątrz pliku .js znajduje się:

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

Następnie można odwołać countsByDate .... nie trzeba czytać z pliku jako takiego.

I można go odczytać z:

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

Tak na marginesie .... d3.js mówi, że lepiej jest ustawić json jako:

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

Dzięki Ginny to było naprawdę pomocne. – eoin

+1

To brzmi naprawdę beznadziejnie – circuitry