[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>