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

D3 예제 : 막대차트 그리기

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<script src="https://d3js.org/d3.v5.min.js"></script>
 
<title>D3.js Example</title>
</head>
<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')                 // 위에서 반환된 요소에 속성(fill)과 값(green)을 준다. 현재는 <rect fill="green" /> .
        .attr('height', (d) => {return d})     // (d) => {return d} 는 익명함수를 간소화해 표현한 코드이다. 괄호안의 'd'는 데이터배열의 값을 가진 임의의 변수이다.  'height'속성의 값에 d를 준다.
        .attr('width', 40)
        .attr("x", (d, i) => {return 50 * i})  // x속성은 svg태그 공간 안에서 왼쪽아래의 한 점을 가리키고, x속성의 값은 한 점으로부터의 거리(가로)를 나타낸다. 괄호안의 'i'는 데이터배열의 인덱스 값을 가진 임의의 변수이다.
        .attr("y", (d, i) => {return 100 - dataFile[i]});
   </script>
</body>
</html>