View

Framework & Library & Tool/D3

D3 개념 및 기본 함수 - 1

rura6502 2017. 10. 8. 03:22

D3 tenet

d3의 tenet은 기존에 계속해서 써왔던 web standards이였던 HTML과 SVG를 사용하여 다른 image representing 없이 visualization 하고자 하는 것이다. 기이렇게 standards 요소를 활용함으로써 css 등을 활용하여 효과를 주는 등 더 풍부한 효과와 웹 발전과 같이 갈수있는 미래 지향적인 점, 그리고 기존에 다른 툴이나 기술과의 호환성을 자동적으로 얻을 수 있다.


D3는 데이터를 DOM으로 변환시켜 visualization을 구성하게되는데 데이터가 바뀌거나 interaction이 일어났을 때 항상 새로운 representation을 하는게 아니라 기존에 구성된 DOM을 update하는 방식으로 동작한다. 


Basic function

selectAll

d3는 DOM요소를 컨트롤하기 위해 간단한 selector를 제공하는데 아래와 같이 사용할 수 있다.


1
d3.selectAll("pre, code") // jQuery : $("pre, code")
cs


또한 아래와 같이 d3에서 사용할 DOM요소의 속성을 컨트롤할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
// select all <circle> elements
var circle = d3.selectAll("circle");
 
// set some attributes and styles
circle.attr("cx", 20);
circle.attr("cy", 12);
circle.attr("r", 24);
circle.style("fill", "red");
// or 
d3.selectAll("circle")
    .attr("cx", 20)
    .attr("cy", 12)
    .attr("r", 24)
    .style("fill", "red");
cs

selection.append

selection에 우떠한 구성요소를 추가한다.

1
2
3
4
5
6
// select the <body> element
var body = d3.select("body");
 
// add an <h1> element
var h1 = body.append("h1");
h1.text("Hello!");
cs

특정 요소를 모두 선택해서 선택된 모든 요소에 추가할 수도 있다.

아래 코드는 모든 section 태그를 선택해서 text="Hello!" 를 가지는 태그 h1을 추가하는 코드이다.

1
2
3
4
5
6
// select all <section> elements
var section = d3.selectAll("section");
 
// add an <h1> element to each
var h1 = section.append("h1");
h1.text("Hello!");
cs


1
2
3
4
var h1 = d3.selectAll("section")
    .style("background", "steelblue")
  .append("h1")
    .text("Hello!");
cs



참고문헌

D3 Workshop, Mike Bostock, @mbostock, 참고 : https://bost.ocks.org/mike/d3/workshop/#0

저작자표시 비영리 변경금지
Share Link
reply