[D3.js] Pie Padding 효과
[D3.js] Pie Padding 효과
- 참고 : [D3.js] pie() 함수
삼천포로 빠졌던 공부를 다시 원래대로 D3.js로 복귀 했네요. 계속 새로운 라이브러리들이 발견되고 공부라를 하다 보니 D3.js가 정상적으로 공부가 안되고 있네요. 오늘은 오래 전 post 한 Pie Chart 에서 Padding 효과를 부여해보는 실험을 할까 합니다. 딱 한줄 코딩만으로 기존의 Pie Chart에 Padding 효과를 넣을 수 있어서 오늘 post는 간단하게 실험 합니다.
기존 Pie Chart
[소스]
<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>
위 소스에서 arcs 부분만 수정하면 됩니다.
- PadAngle(값) : 내부여백을 해당 값으로 지정
var arcs = d3.pie().padAngle(.05);
실험에서는 0.05정도로 설정했네요. 함수 한개로 내부여백을 지정하여 각 Pie 조각들을 일정 간격으로 떨어지게 할 수 있게 됩니다.
수정본
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var data = [10, 20, 30, 40, 50];
var width = 500;
var height = 500
var arc = d3.arc()
.innerRadius(100)
.outerRadius(240)
.cornerRadius(10)
var arcs = d3.pie().padAngle(.05);
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(data))
.enter()
.append("path")
.style("fill", function(d,i){
return d3.color("hsl(100, 100%, " + d.value + "%)");
})
.attr("d", arc)
</script>
</body>
기존 소스에서 두 부분이'수정 되었네요.
var arcs = d3.pie().padAngle(.05);
.data(arcs(data))
[결과]
![](https://steemitimages.com/640x0/https://i.imgur.com/5NBM5xf.jpg)
붙어있는 것보다 떨어져 있으니 좀 더 이쁘네요.
마무리
오늘은 즐거운 토요일이네요. 너무 복잡한 내용을 post 쓰는 것 보다 간단한 한줄짜리 실험으로 가볍게 마무리 합니다.
d3.pie().padAngle(여백값)
이것만 알면 멋진 내부여백을 설정 할 수 있습니다.
스팀도 복잡한 상황이 좀 좋아지고...
![E309F62F-C3D0-485E-A033-5FE211940D2D.jpeg](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmPAtK65P9P49MCLNfA5QJUAhWAN95qssAeidsFZNLzshQ/E309F62F-C3D0-485E-A033-5FE211940D2D.jpeg)
원래대로 복귀 했으면 좋겠어요 !
그래야 할텐데 걱정이네요