d3 - đọc dữ liệu JSON thay vì tệp CSV

Question

Tôi đang cố đọc dữ liệu vào hiển thị lịch của mình bằng JSON. Tại thời điểm nó hoạt động tuyệt vời sử dụng một tập tin 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]; }); 

}); 

Nó đọc dữ liệu CSV sau:

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

Bất kỳ gợi ý về làm thế nào tôi có thể đọc dữ liệu JSON sau thay vì: {"2000-01-01":19,"2000-01-02":11......etc}

Tôi đã thử những điều sau nhưng nó không hoạt động đối với tôi (datareadCal.php spits ra JSON cho tôi):

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

nhờ

Answer 1

Bạn có thể sử dụng d3.entries() để biến một vật thể đen vào một mảng các cặp/giá trị chính:

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

Một điều bạn sẽ nhận thấy, mặc dù, đó là kết quả isn mảng không được sắp xếp đúng cách. Bạn có thể sắp xếp chúng theo khóa tăng dần như sau:

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

Answer 2

Biến tệp .json thành tệp .js được bao gồm trong tệp html của bạn. Bên trong tệp .js của bạn có:

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

Sau đó, bạn có thể tham chiếu countByDate .... không cần đọc từ tệp.

Và bạn có thể đọc nó với:

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

Là một sang một bên .... d3.js nói nó tốt hơn để thiết lập json của bạn lên như:

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