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

문서의 이전 판입니다!

D3 예제 : 막대차트 그리기

<body>
   <svg width = "500" height = "500"></svg>
      <script>
         const dataFile = [10, 20, 30, 40, 50];  // 데이터배열 선언
         const svg = d3.select("svg");
 
         svg.selectAll('rect')   // 데이터 배열 값이 5개이고, <rect>태그가 하나도 존재하지 않기때문에 5개의 빈 태그를 생성한다
           .data(dataFile)       //
           .enter()
           .append('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 예제 : 막대차트 그리기

문서 도구