[D3.js] 시작하기

현재 제가(쭈니) 공부하고 있는 D3.js 책은 개발자만을 대상으로 하지 않은 듯 하다.

HTML, CSS 등 기본적인 설명도 포함이 되어있기 때문이다.

아! 제일 중요한 점이 D3.js는 IE8를 포함해서 그 이하의 브라우저에서는 동작을 하지 않고 있습니다. 즉. IE8 이하의 브라우저는 지원을 하지 않겠다는 의미이다.

간단히 D3를 사용해서 DOM 문서 요소를 새로 생성해보겠습니다.

위와 같이 작성을 하면 웹 페이지로 확인을 해보면 <body> 태그 안에 <p>태그가 생성되고 <p>태그 안에 "New Paragraph!" 라는 텍스트가 생성된 것을 확인할 수 있습니다.

d3.select("body").append("p").text("New Paragraph!");

위 스크립트를 해석하자면

1. d3 객체를 참조해서 body 태그를 선택한다.

2. body 태그 안에 p 태그를 추가 하고 다음 text 메소드로 넘겨준다.

3. p 태그 안에 "New Paragraph!" 텍스트를 추가 한다.

다시 풀어서 쓰자면

1. var body = d3.select("body");

2. var p = body.append("p");

3. p.text("New Paragraph!");

위와 같다.

제가 생각했을 때는 D3.js 에서 가장 기초가 되는 예제인 것 같습니다.

이상 포스팅을 마치겠습니다.

[D3.js] SVG 에 MouseOver 툴팁 (Tooltip) 추가하기! (0)	2014.04.14
[D3.js] 데이터 바인딩하고 막대 차트 그려보자 (0)	2014.04.11
[D3.js] JSON 데이터 불러오기 (0)	2014.04.11
[D3.js] CSV 데이터 불러오기 (0)	2014.04.11
[D3.js] 소개 (0)	2014.04.10

Junny