D3.js 기본 틀
D3.js 기본 틀
오래전 D3.js v4로 잠깐 기초를 독학했는데 이번에 v5로 기본틀을 다시 정리를 해보려고 하네요. 예전 post에서 "사각화 문서 D3.js를 도전해보자"에서 잠시 다루었는데 이번 post는 기본 틀 부터 해서 순차적으로 내용을 정리하여 간단히 post를 해볼까 합니다.
기본 틀
예제를 통해 간단히 살펴보겠습니다.
var data = [1,2,3,4,5];
//갱신
var p = d3.select("body").selectAll("p").data(data)
.text(function(d){return d;})
//추가
p.enter().append("p")
.text(function(d){return d;})
//종료
p.exit().remove();
위 소스에서 보듯이 딱 3개의 구조로 이루어졌습니다.
- 갱신 : body라는 태그를 선택하고 그 위치에 있는 모든 p태그를 선택하라 그리고 data값을 text()함수를 통해 순서대로 출력한다.
- 추가 : 만약 선택된 태그가 3개이고 data가 5개인 경우 나머지 2개의 data는 갱신을 못시키기 때문에 추가부분에서 p태그를 append()함수로 추가하여 text()함수로 해당 새로운 p태그에 값을 text형태로 출력한다.
- 종료 : exit()종료하는데 remove()함수로 인해 만약 p태그가 7개이고 data 5개 일 때 나머지 2개는 제거 됩니다.
여기서, 태그는 body, p 태그로 실험했지만 다른 태그로 접근해서 실험을 하셔도 됩니다. 또, 디테일 접근으로 html문서의 태그 id, class로도 접근을 할 수 있습니다.
예제) p태그가 3개일 때
<body>
<p>a</p>
<p>b/p>
<p>c</p>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var data = [1,2,3,4,5];
//갱신
var p = d3.select("body").selectAll("p").data(data)
.text(function(d){return d;})
//추가
p.enter().append("p")
.text(function(d){return d;})
//종료
p.exit().remove();
</script>
</body>
[결과] 기존 p태그에 1,2,3으로 갱신이 되고 새롭게 p태그 2개가 추가되어 총 5개의 값을 출력했네요.
1
2
3
4
5
**예제) p태그가 7개일 때 **
<body>
<p>a</p>
<p>b/p>
<p>c</p>
<p>d</p>
<p>e</p>
<p>f</p>
<p>g</p>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var data = [1,2,3,4,5];
//갱신
var p = d3.select("body").selectAll("p").data(data)
.text(function(d){return d;})
//추가
p.enter().append("p")
.text(function(d){return d;})
//종료
p.exit().remove();
</script>
</body>
[결과] : 데이터는 5개이고 그러면 선택된 p태그 7개에서 5개는 갱신이 되고 나머지 2개는 exit()종료하는데 나머지 remove()함수로 제거 되게 됩니다.
1
2
3
4
5
그리고, exit() 종료함수만 있고 remove()함수를 제거하면 아래와 같이 출력됩니다.
1
2
3
4
5
f
g
remove()함수에 대한 의미를 잘 이해하시면 됩니다.
정리
초반에 태그 위치 선택은 select(), 태그 범위 선택은 selectAll(), 선택 태그 범위의 출력 할 데이터은 data()함수로 사용합니다.
enter(), append() 아직 데이터가 남아 있을 때 나머지를 해당 태그를 추구할 때 사용하는 함수입니다.
오늘 post에서는 text()함수가 있는데 갱신과 추가 부분에 text() 함수가 표현 되었는데 갱신부분의 기존의 p태그와 추가부분의 새로운 p태그에 data값을 출력하는데 text()함수로 텍스트 형태로 출력시키는 문장입니다. 이 부분을 다른 형태로 하면 해당 행터로 값을 출력합니다. 기본 테스트 이기 때문에 text()함수를 사용한 것이고 원하는 형태로 출력하고자 할 때 이 부분을 잘 활용하여 응용하시면 됩니다.
마지막 종료부분은 exit()함수는 종료이고 remove()은 나머지 부분을 제거하는 함수입니다. remove()함수만 주의하면 기초적인 부분에서는 어려움이 없는 것 같아요.
코딩을 할 때 저 세부분의 영역으로 나눠서 코딩을 하면 됩니다. 기존의 태그에서 갱신이나 추가하고 싶을 때 해당 영역 위치에 원하는 동작 명령 코딩을 삽입만 하면 됩니다.
그리고 , 아래 변수 p로 선언하고 d3코딩을 저장했는데, p변수로 해당 명령 코딩을 접근하기 쉽게 하기 위해서 입니다. 여기서 d3로 동작시키고자 하는 해당 태그명을 변수명으로 하시면 나중에 변수명만 보면 어떤 태그에서 특정 동작이 이루어지는지 쉽게 구별할 수 있습니다. 변수명으로 의미를 잘 전달 할 수 있는 이름으로 지어주는게 좋습니다.
var p = d3.select("body").selectAll("p").data(data)
.text(function(d){return d;})
위 코딩을 보면 p라는 변수명만 보면 p태그에서 뭔가의 동작을 수행했겠구나 하고 쉽게 식별이 됩니다. 나중에 여러 태그을 복합적으로 사용할 때 아주 좋습니다. 태그간 d3표현을 할 때 한쪽 태그에서 다른쪽 태그의 d3 동작을 가져올 때 해당 변수명으로 가져와서 접근하면 코딩 구별하는데 쉽고 코딩도 깔끔해집니다. 이부분은 자주 사용되는 표현이라 나중에 post에 담아보겠습니다.
하하하 웃고 갑니다...
절대 100% 몰라서 가는거 아닙니다^^:
^^
사각화 문서 D3.js 참 다양한 언어가 존재하는 것같아요.
새로운 언어는 아니고요 그냥 챠트나 시각화 문서 전용 함수들을 묶어놓은 자바스크립트 라이브러리 함수라고 생각하시면 될듯요.
아 그렇군요. 함수군요. 무식해서리 ㅋㅋ
@resteemator is a new bot casting votes for its followers. Follow @resteemator and vote this comment to increase your chance to be voted in the future!
비주얼만 되는 줄 알았는데, 숫자도 일단 되는군요. 쓸 수 있을 것 같네요. ㅎㅎㅎㅎ
숫자는 기본베이스고요. 이 숫자를 이미지화 하는게 D3.js의 사용 목적이지요. ^^
오호. 그런식으로 하는 줄 몰랐군요. ㅎㅎㅎ 재밌습니다.
이오스 계정이 없다면 마나마인에서 만든 계정생성툴을 사용해보는건 어떨까요?
https://steemit.com/kr/@virus707/2uepul
방문해주셔서 감사합니다. ^^
pairplay 가 kr-dev 컨텐츠를 응원합니다! :)
컨텐츠 응원에 감사합니다. ^^