======================================================================
D3.JS 공식 사이트 https://d3js.org/
======================================================================
데이터를 시각화 해주는 데 가장 HOT한 라이브러리인 D3.JS 현재 구축중인 플랫폼도 반응형으로 D3.JS로 대쉬보드를 만드는 중인데 계속 공부할 겸 올리겠다.
d3.js 라이브러리의 버전은 v5.2.0을 사용할 계획이다. 대부분 나와있는 차트들은 v3 or v4이지만 새로나온 v5로 하겠다. v3버전과 v4, v5는 사뭇 다르다.
d3
d3메서드를 작성하기 위해서는 d3라고 먼저 입력 한다. 그 후에 메서드체인 형식으로 메서드를 이어서 붙여나간다. jquery의 $(document).ready(function(){ }) , $(function(){})처럼 앞에 선언함으로써, 앞으로 d3 메서드를 사용할 것이라는 것을 알려주는 역할이라고 보면 된다. ```javascript d3.select(선택할 element요소) // ex) #element, .element, element
d3.select(‘#box’) .append(‘g’) .append(‘circle’) .attr(‘r’,5)
### select()
---
> 특정 element요소를 선택한다. d3는 셀렉션과 바인딩이 다라고 봐도 좋을 정도로 중요한 메서드다.
```javascript
//id가 box1인 div를 선택하기
d3.select('#box1')
//class가 box1인 div를 선택하기
d3.select('.box1');
//svg를 선택하기
d3.select('svg');
selectAll()
특정요소 전부를 셀렉션하는 메서드다. 뒤에나올 enter(),exit()와 함께 이해해야할 중요한 메서드다.
//svg의 자식 엘리먼트인 rect를 모두 셀렉션하기
d3.select('svg')
.selectAll('rect');
//circle을 모두 셀렉션
d3.selectAll('circle')
data(배열값)
데이터를 시각화하기 위해서는 일단은 데이터를 받을 그릇이 필요하지 않겠나? data()메서드를 통하여 값을 할당한다. 뒤에 나올 enter() 메서드 이전에 chain해주자.
let incomingData = [23,4335,6,45354,23,132,99999];
d3.select('#container_box') //container_box라는 id요소를 가진 div태그에
.append('svg') //자식 요소로 svg태그를 추가한다.
.selectAll('rect') // 그리고 그 자식요소인 svg가 가지고 있는 모든 rect 태그를 셀렉션하고
.data(incomingData) // data를 바인딩한다.
append()
d3.select(), d3.selectAll()로 셀렉션한 엘리먼트의 자식요소를 추가한다.
d3.select('svg')
.append('g')
.append('circle')
enter()
d3를 사용함에 있어 가장 중요하다고 생각하는 메서드다. d3.json, d3.csv등으로 받아온 값을 동적으로 추가하기 위해 사용해야 한다. 데이터를 셀렉션(d3.select(element))에 바인딩할때 data의 값은 DOM요소의 갯수보다 많거나 적을 수 있고, 값은 계속 늘거나 줄어들 것이다. 데이터가 DOM요소의 갯수보다 많을 때 enter()메서드를 통해 자동으로 필요한 만큼의 DOM요소를 추가한다. ```javascript let incomingData = [1,2,3,4,5,6,7,8,9,10,11,12]; //12개의 값이 담긴 data가 있다고 하자,
d3.select('svg') //svg요소를 셀렉션하자, 이 svg밑에는 5개의 text태그가 이미 존재한다.
.selectAll('text') // 5개의 기존에 이미 있느 text태그가 셀렉션되었다.
.data(incomingData) // 12개의 값이 들어있는 배열 데이터가 바인딩된다.
.enter() //enter()메서드가 선언되었다는 것은 12개의 값이 들어가야 한다는 것을 의미한다.
기존의 DOM요소로 5개의 text가 이미 선언되었다. 그렇다면 7개만 넣어진다면 12개 되니,
enter()는 바인딩된 배열의 length값(12) - 기존 dom요소의 length(5)만큼 호출한다. enter()를 7번 호출하는 것이다.
.append('g')
.append('text')
.text(function(d){
return d; // incomingData의 6번째 값부터 반환된다.
}); ```
exit()
enter()와는 다르게 데이터의 개수가 dom요소의 개수보다 작으면 호출한다. ```javascript let incomingData = [1,2,3,4]; //이번엔 4개의 값만이 있다.
d3.select('svg') //svg요소를 셀렉션하자, 이 svg밑에는 5개의 text태그가 이미 존재한다.
.selectAll('text') // 5개의 기존에 이미 있는 text태그가 셀렉션되었다.
.data(incomingData) // 4개의 값이 들어있는 배열 데이터가 바인딩된다.
.exit() //exit()메서드는 데이터(incomingData)의 갯수가 dom요소(text)보다 작으면 실행한다.
//데이터의 개수는 4개이고 기존 Dom에 선언된 text는 5개이다. 데이터의 개수가 1작다. 즉 exit() 메서드를 실행한다. select()한 svg에 g를 붙이고 g안에 text붙이고 데이터 값을 반환한다.
.append('g')
.append('text')
.text(function(d){
return d;
}); ```
attr()
attribute를 조작하는 메서드다. 실코드로 보는 게 이해하기 좋다.
d3.select('svg')
.attr('id',"bubble_chart")
.attr('width', width)
.attr('height',height)
d3.select('rect')
.attr('width',10)
.attr('height',100)
.attr('x',10)
.attr('y',6)
style()
style()메서드는 css를 조작한다.
d3.select('rect')
.style('fill','#ff5274')
.style('stroke','#fff');
.style('opacity',.50);
그래서 위에 것들을 종합해서 써보자면
let data = [1,2,3,4,5,6,7,8,9];
d3.select('svg') //svg요소를 셀렉션 한 후에
.attr('id','selected_svg') //그 요소의 id값을 selected_svg로 변경한다.
.selectAll('circle')// 그후 셀렉션된 svg의 하위 요소에 circle이 있는지 셀렉션 시도한다.
.data(data) // data값을 바인딩한다.
.enter() // data가 dom요소보다 많다면 enter()는 그 차이만큼 호출된다.
.append('g') //g태그를 붙이고
.append('circle') //g 태그의 자식요소로 circle태그를 붙이고
.attr('r',5) // 속성들이 정의되고
.attr('cx',10) // 속성들이 정의되고
.attr('cy',5) // 속성들이 정의되고
.style('fill','black') // 속성들이 정의되고
.style('stroke','red') // 속성들이 정의되고
.append('text') //text태그가 circle태그의 자식요소 더해지고
.text('흥!'); // 흥! 이라는 글씨를 넣어준다.
/**/