2012-04-09 4 views
23

JSON을 사용하여 달력 시각화로 데이터를 읽으려고합니다.d3 - CSV 파일 대신 JSON 데이터 읽기

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 데이터를 읽습니다 : 그것은 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); 

감사

답변

13

당신은 키/값 쌍의 배열로 객체 리터럴을 설정하는 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); 
}); 
+0

안녕하세요 숀, 감사 얻기를위한 이것에 관해 나에게 돌아온다. 그러나 나는 아직도 꽤 없어졌다. JSON을 사용하기 위해 CSV 파일에서 읽은 데이터를 사용하는 d3 캘린더 예제를 변경하려고합니다. http://mbostock.github.com/d3/ex/calendar.html – eoin

+0

안녕하세요 Shawn, 알아보기에는 시간이 좀 걸렸습니다. (야간 학교와 프로그래밍이 아닌 날 직업을 저글링하고 데이터와 프로그래밍을 가르치고 있지만) 핵심은 바로 d3.entries로 JSON을 포맷하는 것입니다. 그 일을하지만 내 코드에서 내 빈 달력 프레임의 연도와 내 데이터의 연도를 일치시키는 것을 잊어 버린 곳에서 말이죠. 즉, 빈 달력은 1999 년이었고 JSON 데이터는 2000 년이었습니다. 도움과 인내심을 가져 주셔서 감사합니다. . – eoin

6
는 HTML 파일에 포함은 .js 파일로 .json 파일을 돌려

. .js 파일의 내용은 다음과 같습니다.

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

그런 다음 countsByDate를 참조 할 수 있습니다. 파일 자체에서 읽을 필요가 없습니다.

그리고 당신은 그것을 읽을 수 있습니다 : 여담으로

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

.... 그것이로 JSON을 설정하는 것이 좋습니다 말한다 d3.js :

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

감사합니다. Ginny 정말 도움이되었습니다. – eoin

+1

이것은 정말 해킹 소리가납니다. – circuitry