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