wiki:d3:막대차트_그리기

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:d3:막대차트_그리기 [2020/07/14 21:05]
jskim 만듦
+++ wiki:d3:막대차트_그리기 [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== D3 예제 : 막대차트 그리기 ======
+===== D3 예제 : 막대차트 그리기 =====
+<code java>
+<!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>
+</code>
+{{:wiki:d3:막대차트_element.png?530|}}
+{{:wiki:d3:기본막대차트.png?300|}}
+{{tag>eleven D3.js 차트그리기 막대차트}}

/volume1/web/dokuwiki/data/attic/wiki/d3/막대차트_그리기.1594728304.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)