Requests - zziuni/d3 GitHub Wiki

Wiki ▸ API Reference ▸ Core ▸ Requests

데이터 시각화를 논하기 전에 우린 먼저 데이터를 가져와야 한다. 데이터를 브라우저로 가져오는 방법은 여러 가지가 있다. 데이터 세트가 작다면 스크립트에 필요한 값을 하드코딩으로 그냥 넣을 수 있다. 아니면 데이터를 변수로 정의한 별도의 자바스크립트 파일을 불러올 수도 있다. (JSONP가 이에 해당함) HTML5도 data 속성를 사용해서 문서에 직접 데이터를 내장시키는 방법을 제공한다. 하지만 브라우저로 데이터를 불러오는 가장 널리쓰이는 방법은 XMLHttpRequest 즉, XHR 이다. XHR은 데이터를 비동기로 불러올 수 있으며 (그래서 데이터를 가져오는 동안 페이지가 비어 보일 수 있다.), JSONP보다 안전하다. D3는 파일에서 데이터를 쉽게 불러오는 핼퍼 메서드를 다양하게 제공한다.

비동기로 데이터를 불러올 때, 데이터 로딩과 관련된 코드는 보통 콜백 함수 안에 있어야 한다. D3 사이트의 calendar visualization가 그 경우다. 데이터와 관련 없는 코드는 페이지가 로드 될 때 바로 실행할 수 있다. 트랜지션를 지속하는 작업같이 초기 렌더링 후에 데이터에 접근할 수 있도록 불러온 데이터를 글로벌 네임스페이스로 저장하는 게 편할 수도 있다. 이를 위해서 클로저를 사용할 수도 있고 단지 전역변수에 불러온 데이터를 할당할 수도 있다.

var data; // a global

d3.json("path/to/file.json", function(json) {
  data = json;
  visualizeit();
});

기본적으로 브라우저는 크로스 도메인 요청이 불가능하다. (로컬 파일 시스템에서도 마찬가지다. 그래서 README에서는 예제를 띄울 로컬 웹서버 사용을 권장한다.) 그래서 이런 보안 제한을 우회하기 위해서 JSONP를 사용할 수 있는데, 이 방법은 외부 사이트가 임의를 자바스크립트를 실행 할 수 있기 때문에 보안적인 면에서 안전하지 않다. 대신에, Access-Control-Allow-Origin: * HTTP 해더를 사용하자. 이는 브라우저의 안전한 확장 리소스 요청을 보장한다. 자세한 내용은 W3C권고안 Cross-Origin Resource Sharing를 참고한다.

# d3.xhr(url[, mime], callback)

url 로 HTTP GET 요청을 날린다. "application/json"같은 mime 타입을 두 번째 전달인자로 사용할 수 있다. 요청은 비동기로 동작해서 요청을 연 후에 이 메서드는 바로 반환된다. 데이터가 사용가능해졌을 때, 지정한 callback 이 XMLHttpRequest 객체를 인자로 받으며 호출된다. 에러가 발생하면 콜백 함수는 null 인자를 받아서 실행된다.

이 메서드는 일반적으로 직접 사용할 일은 없고, 데이터 타입별로 메서드중 하나를 사용한다. 예를 들어 일반 텍스트는 text, JSON은 json, XML은 xml, HTML은 html, CSV 파일은 csv를 사용한다.

# d3.text(url[, mime], callback)

url 로 텍스트 파일을 위한 HTTP GET 요청을 날린다. "text/plain" 같은 mine 타입을 두 번째 전달인자로 사용할 수 있다. 요청은 비동기로 동작해서 요청을 연 후에 이 메서드는 바로 반환된다. 텍스트가 사용가능해졌을 때, 요청객체의 responseText 속성에 텍스트 문자열을 인자로 받으며 지정한 callback 이 호출된다. 에러가 발생하면 콜백 함수는 null 인자를 받아서 실행된다.

# d3.json(url, callback)

url 로 JSON파일을 위한 HTTP GET 요청을 날린다. 이때 mine 타입은 "application/json” 이다. 요청은 비동기로 동작해서 요청을 연 후에 이 메서드는 바로 반한된다.
텍스트가 사용가능해지면 요청객체의 responseText 속성 값을 파싱한 JSON 결과(보통은 파일 내용을 토대로한 객체나 배열)를 인자로 넘겨서 callback 을 호출한다. 에러가 발생하면 콜백 함수는 null 인자를 받아서 실행된다.

# d3.xml(url[, mime], callback)

url 로 XML 파일을 위한 HTTP GET 요청을 날린다. "application/xml"같은 mime 타입을 두 번째 전달인자로 사용할 수 있다. 요청은 비동기로 동작해서 요청을 연 후에 이 메서드는 바로 반환된다. XML 내용이 사용가능해면 요청객체의 responseXML 속성에서 불러온 XML 내용의 root(document) 문서요소를 인자로 넘겨서 callback 을 호출한다. 에러가 발생하면 콜백 함수는 null 인자를 받아서 실행된다.

# d3.html(url, callback)

url 로 HTML 파일을 위한 HTTP GET 요청을 날린다. mime 타입은 "text/html"를 사용한다. 요청은 비동기로 동작해서 요청을 연 후에 이 메서드는 바로 반환된다. HTML 내용이 사용가능해지면 불러온 HTML 내용의 root (document) 문서요소를 인자로 넘겨서 callback 을 호출한다.에러가 발생하면 콜백 함수는 null 인자를 받아서 실행된다.

# d3.csv(url, callback)

CSV를 참고.