d3.js
JSON 및 CSV와 함께 D3 사용
수색…
통사론
- d3.csv (url [[, row], callback])
- d3.tsv (url [[, row], callback])
- d3.html (url [, callback])
- d3.json (url [, callback])
- d3.text (url [, callback])
- d3.xml (url [, callback])
CSV 파일에서 데이터로드
DOM 요소에 바인딩 할 데이터를 가져 오는 방법에는 여러 가지가 있습니다. 더 간단한 것은 배열로 스크립트에 데이터를 가지고 있습니다 ...
var data = [ ... ];
그러나 D3.js를 사용하면 외부 파일에서 데이터를로드 할 수 있습니다. 이 예에서는 CSV 파일의 데이터를 올바르게로드하고 처리하는 방법을 보여줍니다.
CSV 파일은 쉼표로 구분 된 값 입니다. 이런 종류의 파일에서 각 행은 하나 이상의 필드로 구성된 각 레코드가 쉼표로 구분 된 데이터 레코드입니다. 우리가 사용하려고하는 함수 인 d3.csv 가 CSV의 첫 번째 줄을 머리글 , 즉 필드의 이름을 포함하는 줄로 사용한다는 것을 아는 것이 중요합니다.
따라서이 CSV를 "data.csv"라고합니다.
city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70
"data.csv"를로드하려면 d3.csv 함수를 사용합니다. 더 쉽게 만들려면 "data.csv"가 스크립트의 동일한 디렉토리에 있고 상대 경로가 단순히 "data.csv"라고 가정합니다. 그래서 우리는 다음과 같이 씁니다.
d3.csv("data.csv", function(data){
//code dealing with data here
});
콜백에서 data 를 인수로 사용했습니다. 이는 D3에서 일반적인 관행이지만 다른 이름을 사용할 수 있습니다.
CSV로 d3.csv 는 무엇을합니까? CSV는 객체 배열로 변환됩니다. 예를 들어, 우리가 console.log 우리의 데이터 :
d3.csv("data.csv", function(data){
console.log(data)
});
이것이 우리가 보게 될 것입니다 :
[
{
"city": "New York",
"population": "3400",
"area": "210"
},{
"city": "Melbourne",
"population": "1200",
"area": "350"
},{
"city": "Tokyo",
"population": "5200",
"area": "125"
},{
"city": "Paris",
"population": "800",
"area": "70"
}
]
이제 해당 데이터를 DOM 요소에 바인딩 할 수 있습니다.
이 예제에서 population 및 area 은 문자열입니다. 그러나 아마, 당신은 숫자로 그것들을 다루기를 원할 것입니다. 콜백 내부의 함수 ( forEach )로 d3.csv 수 있지만 d3.csv 에서는 "접근 자"함수를 사용할 수 있습니다.
d3.csv("data.csv", conversor, function(data){
//code here
});
function conversor(d){
d.population = +d.population;
d.area = +d.area;
return d;
}
당신은 또한에 접근을 사용할 수 d3.tsv 있지만에서 d3.json .
참고 : d3.csv 는 비동기 함수이므로 CSV 파일이로드되기 전에 코드가 즉시 실행됩니다. 따라서 콜백 내부에서 data 를 사용하기위한 특별한주의가 필요합니다.
d3.request ()의 콜백 오류 처리에서 하나 또는 두 개의 매개 변수
d3.request() 또는 편리한 생성자 ( d3.json , d3.csv , d3.tsv , d3.html 및 d3.xml ) 중 하나를 사용할 때 많은 오류가 발생할 수 있습니다. 네트워크 오류로 인해 발행 된 요청 또는 응답에 문제가 있거나 내용의 형식이 잘못되어 파싱에 실패 할 수 있습니다.
위에서 언급 한 방법 중 하나에 전달 된 콜백 내에서 일부 오류 처리를 구현하는 것이 바람직합니다. 이 목적을 위해 콜백은 두 개의 인수를 받아 들일 수 있습니다. 첫 번째는 오류이고 두 번째는 데이터입니다. 로딩 또는 구문 분석 중에 오류가 발생하면 오류에 대한 정보가 data 가 null 첫 번째 인수 error 로 전달됩니다.
d3.json{"some_file.json", function(error, data) {
if (error) throw error; // Exceptions handling
// Further processing if successful
});
당신은 무엇이든간에 두 가지 매개 변수를 제공 할 의무가 없습니다. 하나의 매개 변수만을 사용하는 콜백과 함께 요청 메소드를 사용하는 것은 완벽합니다. 이러한 종류의 콜백을 처리하기 위해 request.js의 개인 함수 fixCallback() 이 있습니다.이 함수는 정보가 메소드의 단일 인수에 전달되는 방식을 조정합니다.
function fixCallback(callback) {
return function(error, xhr) {
callback(error == null ? xhr : null);
};
}
이것은 하나의 매개 변수 만 갖는 모든 콜백에 대해 D3에 의해 호출되며 정의에 의해 데이터입니다.
요청 메소드의 콜백에 얼마나 많은 매개 변수가 제공되는지에 관계없이 data 매개 변수에 대한 규칙은 다음과 같습니다.
- 요구가 실패했을 경우,
data는null - 요청이 성공하면
data에로드 된 (및 구문 분석 된) 내용이 포함됩니다
one-parameter와 two-parameter 버전의 유일한 차이점은 발생할 수있는 오류에 대한 정보 제공 방식에 있습니다. error 매개 변수를 생략하면 메소드는 자동으로 실패하여 data 를 null 로 남겨 둡니다. 반면 콜백에 두 개의 인수가 정의되어 있으면로드 또는 구문 분석 중 오류에 대한 정보가 첫 번째 매개 변수로 전달되어 적절하게 처리 할 수 있습니다.
d3.json 대한 다음 네 번의 호출은 기존 / 존재하지 않는 파일과 하나의 매개 변수 / 두 매개 변수 콜백에 대해 가능한 시나리오를 보여줍니다.
// FAIL: resource not available or content not parsable
// error contains information about the error
// data will be null because of the error
d3.json("non_existing_file.json", function(error, data) {
console.log("Fail, 2 parameters: ", error, data);
});
// FAIL: resource not available or content not parsable
// no information about the error
// data will be null because of the error
d3.csv("non_existing_file.json", function(data) {
console.log("Fail, 1 parameter: ", data);
});
// OK: resource loaded successfully
// error is null
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(error, data) {
console.log("OK, 2 parameters: ", error, data);
});
// OK: resource loaded successfully
// no information about the error; this fails silently on error
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(data) {
console.log("OK, 1 parameter: ", data);
});