D3.js API 함수들을 공부하다가 특정 기능을 알아보기 위해서 구글 검색을 하다가 우연이 D2B.js 라이브러리를 발견했네요. 지난 시간에 몇개 라이브러리를 소개했는데 이번에도 새로운 D3기반 라이브러리가 있어서 소개하면 좋을 것 같아서 간단히 post로 만들어 보았습니다.
위 사이트를 가시면 다음 화면이 뜹니다.
왼쪽 항목은 API Reerence 항목이고 D2B 라이브러리에서 제공되는 함수들을 잘 정리해 놓았습니다.
Installing에서 CDN이라는 문구의 링크 부분을 클릭하시면 웹페이지 주소를 알 수 있고 그 주소로 따로 라이브러리 파일을 설치 할 필요 없이 테스트를 할 수 있습니다.
<script src="https://unpkg.com/[email protected]/build/d2b.min.js"></script>
위 그림처럼 나오고 함수에 대해 자세히 나와 있네요. 하지만 막상 코딩을 해보려고 하면 좀 잘 안 될 거에요.
그럴 때에는 다음과 github 사이트에 가시면 샘풀 예제가 있습니다.
위 D2B github 사이트를 클릭하면 다음과 같은 웹페이지가 열립니다.
위 그림에서 examples에 가시면 샘풀 예제드이 있는데 그걸 그대로 실행 시키면 됩니다.
위 차트 예제들 중에 하나를 선택하셔서 실험 하시면 됩니다.
github에 있는예제 중 pie 차트를 한번 돌려 봤네요.
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/d2b.min.js"></script>
<body>
<div class = 'pie-chart'></div>
<script>
var pie = d2b.chartPie().donutRatio(0.5); //내부테뒤
pie.chartFrame().size({height: 400}); //차트 크기
var chart = d3.select('.pie-chart'); //'pie-chart'인 div 태그선택
chart
.datum([ //데이터
{label: 'arc 1', value: 10, empty: true},
{label: 'arc 2', value: 20},
{label: 'arc 3', value: 30},
{label: 'arc 4', value: 40},
{label: 'arc 5', value: 50}
])
.transition()
.call(pie);
window.onresize = function () {chart.transition().call(pie)}; //호출
</script>
</body>
주석을 달긴 했는데 대충 함수들이 기존 d3.js pie()함수에서 사용하는 방법들이 유사하게 코딩되네요. 데이터에서 empty라는 속성이 있는데 true하면 해당 데이터는 숨기는 기능을 하네요. false는 디폴드 값으로 보이는 속성값이고요. pie 차트에 재밌는 속성을 가지고 있네요.
[결과]
D2B.js를 이용하니깐 별로 코딩을 안해도 재밌는 결과를 pie 차트로 만들어 냈네요. 여기서 제공되는 함수들을 잘 이용하면 재밌는 차트를 많이 만드 수 있을 것 같네요.
오늘도 새로운 D2B.js 라이브러리를 간단히 소개 했습니다. D3.js를 공부하면서 관련된 다른 라이브러리들을 발견을 하는데 갈수록 공부해야 할 것들이 늘어 나네요. 참고오 이번 D2B.js 라이브러리는 잠깐 몇분만 가장 기초적인 예제를 보고 이해한 후에 테스트 하고 말았지만 나중에 D3.js가 끝나면 제대로 이것도 공부를 해봐야 겠네요.