[D3.js] D3에서 데이터를 다루는 방법

D3에서 데이터를 다루는 방법에 대해 자세히 알고 싶으면 “http://bost.ocks.org/mike/join”을 참조하기 바란다.

Thinking with Joins

http://bost.ocks.org/mike/join/

Object Constancy

http://bost.ocks.org/mike/constancy/

Let’s Make a Bar Chart

http://bost.ocks.org/mike/bar/

D3의 모든 기능을 나열한 마이크 보스톡 Mike Bostock의 블로그

http://bost.ocks.org/mike/

http://d3js.org의 ‘example’ 섹션

https://github.com/mbostock/d3/wiki/Gallery

7.6 The ‘transform’ attribute

rotate(<rotate-angle> [<cx> <cy>])

http://www.w3.org/TR/SVG/coords.html#TransformAttribute

Selections

Wiki ▸ API Reference ▸ Core ▸ Selections

https://github.com/mbostock/d3/wiki/Selections#wiki-data

tag에서 class 속성값에 중간에 빈 공백이 있을 경우 공백 대신 "." 을 넣어서 참조해야 한다.

        d3.select("svg")

        .append("g")

        .attr("class", "x axis")

        .attr("transform", "translate(0," + (height-margin) + ")")

        .call(x_axis);

        d3.select(".x.axis")

        .append("text")

        .text("collisions with injury (per million miles)")

        .attr("x", (width/2)-margin-50 )

        .attr("y", margin/1.5);

"x axis" 는 x 와 axis 라는 2개의 클래스를 설정한 것이다.

 

css 에서 .axis 로 참조하기 위해서.

d3에서 참조할 때는 d3.select(".x.axis") 라고 각각 앞에 "."을 붙여서 참조해야 함에 유의하자.