쿠...sal: [컴][웹] d3 사용하기

Selectors

select(), selectAll()

css 의 selector
pre, h2{
color: black
}

d3 의 selector
d3.selectAll("pre, code")

> d3.selectAll("div")
> [object Array]

d3.selectAll("circle")
 .attr("cx", 20)
 .attr("cy", 20)
 .attr("r", 25)
 .style("fill", "blue")

> d3.select("label").size()
> 1
> d3.selectAll("label").size()
> 2

d3.select("body").append("p")

selection.data()

data 를 DOM element 에 묶어보자. (bind) 이 binding 을 할 때 쓰이는 함수가 selection.data() 이다.

array 를 가지고 한 번 test 해 보자.

var dataArray = [ 10, 20,30, 40, 50]

var selected = d3.select("body").selectAll("p");
selected.data(dataArray).enter().append("p");

selectAll("p")

이녀석은 정말 의미없는 녀석이다. 이녀석 때문에 조금 헷갈렸는데, 이녀석은 실제로 선택한다기 보다 아무것도 선택하지 않기 위해 쓰인다. 무슨 이야기냐 하면,
아래 enter() 부분을 보면, data 가 존재하지 않을 때 data 를 생성한다고 한다. 그렇기 때문에 선택된 녀석이 없어야 만들어 낸다 .그래서 위와 같은 일을 한다.
예를 들어

d3.select("body").data(dataArray).enter().append("p").text("test");

를 하면 "test" 가 4개밖에 안만들어진다.
ref.1 에서는 이녀석을 앞으로 만들어질 녀석을 미리 적어놓는 개념으로 이해하라고 한다.

data()

data(dataArray) 에서 "data 의 개수"를 파악하게 된다. 그리고 이후에 오는 method 들(enter, append,...) 등을 "data의 개수"만큼 수행하게 된다.

enter()

enter() 는 data 가 엮인 DOM element 를 만들어 낸다. 만약에 가지고 있는 element 의 개수보다 data 의 개수가 많으면 새로운 element 를 만들어서 data 를 bind 시켜준다.

Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            



            var dataArray = [10, 20, 30, 40, 50];
            d3.select("body").selectAll("p").data(dataArray).enter().append("p").text("New paragraph!");
        </script>
    </body>
</html>

text(), attr(), style() 등을 사용할 수 있다.

작성중...

References

D3 — Scott Murray — alignedleft

쿠...sal

[컴][웹] d3 사용하기