d3 - CSVファイルの代わりにJSONデータを読み取る

Question

JSONを使用してカレンダーの視覚化にデータを読み込もうとしています。 瞬間、それは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]; }); 

}); 

これは、次のCSVデータを読み込む：

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

私が代わりに次のようなJSONデータを読み取ることができる方法上の任意のポインタを： {"2000-01-01":19,"2000-01-02":11......etc}

私は以下を試しましたが、私のために働いていませんでした（datareadCal.phpは私にとってJSONを 吐き出します）：

の

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

おかげ

Answer 1

あなたは、キー/値のペアの配列にオブジェクトリテラルをオンにするd3.entries()を使用することができます：あなたが気づく

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

一つのことは、しかし、という結果の配列のISNです正しくソートされていません。次のようにキーを昇順で並べ替えることができます。

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

Answer 2

.jsonファイルをHTMLファイルに含まれる.jsファイルに変換します。あなたの.jsファイルの中にあります。

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

が次にあなたがcountsByDate ....ファイル自体から読み取るする必要はありませんを参照することができます。

そして、あなたがそれを読むことができます取得するためのおかげで、

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