문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

문서의 이전 판입니다!

D3 예제 : 막대차트 그리기

<body>
   <svg width = "500" height = "500"></svg>
      <script>
         const dataFile = [10, 20, 30, 40, 50];   // 데이터배열 선언.
         const svg = d3.select("svg");            // DOM에서 <svg>요소를 찾는다.
 
         svg.selectAll('rect')     // <rect>요소를 모두 찾는다. 현재 DOM안에 <rect>는 하나도 없기 때문에 빈 값을 반환한다.
           .data(dataFile)         // dataFile배열의 개수를 계산하고, 이후 이어지는 메서드체인을 그 수만큼 반복한다.
           .enter()                // select 또는 selectAll에서 반환된 값이 있는지 확인하고, 있다면 각각에 데이터와 연결한다. 데이터가 연결될 값이 부족하다면, 그 만큼의 빈 값을 생성해 데이터와 연결한다.
           .append('rect')         // enter에서 반환 된 값에 <rect>요소를 준다. 
           .attr('fill', 'green')
           .attr('height', (d, i) => {return d})
           .attr('width', 40)
           .attr("x", (d, i) => {return 50 * i})
           .attr("y", (d, i) => {return 100 - dataFile[i]});
      </script>
</body>

eleven, d3, 차트그리기, 막대차트

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

D3 예제 : 막대차트 그리기

문서 도구