문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 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("bar")
           .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>

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

사용자 도구

사이트 도구

D3 예제 : 막대차트 그리기

문서 도구