[D3.js] pie() 함수
[D3.js] pie() 함수
- Mark R’s Blocks 출처 : https://bl.ocks.org/markarios/6b8b91e0c4ce77b4942659aace8d2d6c
d3 함수들을 빼먹은게 없나 조사하다가 pie()함수에 대해서 이야기 하면 좋을 것 같아서 간단히 "Mark R’s Blocks"의 예제 중 하나를 선택했는데 이쁘고 코딩이 간단해서 pie()함수를 공부하는데 도움이 될 듯 싶어서 이 예제로 간단히 테스트를 해보았습니다.
1. pie() 함수
d3.arc()
.innerRadius(안쪽반경)
.outerRadius(바깥쪽반경)
.startAngle(시작각)
.endAngle(끝각);
위의 이것이 기본 베이스 이야기 한 적이 있습니다. 이건 한조각의 모양인데 이 조각들을 여러개를 하나로 묶으면 pie 차트가 됩니다.
var arc = d3.arc()
.innerRadius(100)
.outerRadius(240)
.cornerRadius(15)
출처 예제에 보면 cornerRadius()함수가 추가 되었는데 그 값을 수정함으로 각 조각의 테뒤쪽에 모습을 약간 부드럽게 휘어지는 모습으로 만들어 집니다. 이 말은 잘 이해가 안되실 꺼에요. 아래 예제의 결과를 모습면 쉽게 이해가 가시 거에요.
var data = [10, 20, 30, 40, 50];
var arcs = d3.pie()(data);
이렇게 d3.pie()함수에 data값을 넣어시면 자동으로 전체 pie 원 기준으로 차트가 그려지게 됩니다.
위 그림처럼 출력 하려면,
<g transform="translate(250,250)">
<path d="M-97.61679433819202,-219.25090983422425A240,240,0,0,1,-4.408728476930471e-14,-240L-1.8369701987210297e-14,-100A100,100,0,0,0,-40.67366430758001,-91.3545457642601Z" style="fill: rgb(17, 51, 0);"></path>
...
이렇게 코딩하는데 g태그에서 path에서 d의 그려질 값만 넣으시면 위의 같은 긤으ㅗ 그려지게 됩니다.
D3.js의 코딩은 다음과 같겠죠.
var pie = g.selectAll("path")
.data(arcs)
.enter()
.append("path")
.style("fill", function(d,i){ //색상지정
return d3.color("hsl(100, 100%, " + d.value + "%)");
})
.attr("d", arc)
자바스크립트로 하니깐 간단하죠. 5개이상을 html로 코딩한다면 엄청난 노가다가 되겠죠.
2. 종합소스
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var data = [10, 20, 30, 40, 50];
var arcs = d3.pie()(data);
var width = 500;
var height = 500
var arc = d3.arc()
.innerRadius(100)
.outerRadius(240)
.cornerRadius(10)
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.style("background-color","yellow");
g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height/ 2 +")")
var pie = g.selectAll("path")
.data(arcs)
.enter()
.append("path")
.style("fill", function(d,i){
return d3.color("hsl(100, 100%, " + d.value + "%)");
})
.attr("d", arc)
</script>
</body>
[결과]
마무리
오늘도 pie()함수를 테스트 해보았네요. 예전에 Steem.js API를 공부하면서 pie()함수를 다루어 보았는데 이번에도 동이하게 다루어 봤네요. 현재 D3.js를 정리 중이라 과거에 Pie()함수에 대해서 약간 중복 post가 되어 버렸네요.
Sponsored ( Powered by dclick )
오늘도 보팅과 디클릭으로 응원 드립니다 :-)
응원 감사합니다.
짱짱맨 호출에 응답하여 보팅하였습니다.
짱짱맨은 저자응원 프로그램입니다. 더 많은 저자 분들에게 더 큰 혜택을 드리고자 스파임대 스폰서를 받고 있습니다. 스폰서 참여방법과 짱짱맨 프로그램에 관해서는 이 글을 읽어 주세요. 기업형 예비증인 북이오(@bukio)가 짱짱맨 프로그램을 운영하고 있습니다. 여러분의 증인 보팅은 큰 힘이 됩니다. Vote for @bukio
짱짱맨 방문해주셔서 감사합니다.
날이 쌀쌀 합니다.
전 목이 안좋아 콜록 콜록 했는데.....
관리 잘하시고, 함수 옅 보고 갑니다^^:
요새 감기가 떨어질려고 하면 다기 감기 증상이 보이고 한달 내내 콧물이 zzz ^^
pie 함수 통계나타낼 때 많이 쓰이겠어요
pie 차트가 아마 보셨을 거에요. 스팀 사이트 중에 통계만 내는 사이트였는데 사이트명이 기억이 안나지만요. 찾아보시면 이런걸 만들면 좋겠구나 하고 생각하실거에요.