| 양쪽 이전 판
이전 판
다음 판
|
이전 판
|
wiki:d3:막대차트_그리기 [2020/07/16 09:24]
jskim |
wiki:d3:막대차트_그리기 [2023/01/13 18:44] (현재)
|
| ===== D3 예제 : 막대차트 그리기 ===== | ===== D3 예제 : 막대차트 그리기 ===== |
| <code java> | <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> | <body> |
| <svg width = "500" height = "500"></svg> | <svg width = "500" height = "500"></svg> |
| <script> | <script> |
| const dataFile = [10, 20, 30, 40, 50]; // 데이터배열 선언. | const dataFile = [10, 20, 30, 40, 50]; // 데이터배열 선언. |
| const svg = d3.select("svg"); // DOM에서 <svg>요소를 찾는다. | const svg = d3.select("svg"); // DOM에서 <svg>요소를 찾는다. |
| | |
| svg.selectAll('rect') // <rect>요소를 모두 찾는다. 현재 DOM안에 <rect>는 하나도 없기 때문에 빈 값을 반환한다. | svg.selectAll('rect') // <rect>요소를 모두 찾는다. 현재 DOM안에 <rect>는 하나도 없기 때문에 빈 값을 반환한다. |
| .data(dataFile) // dataFile배열의 개수를 계산하고, 이후 이어지는 메서드체인을 그 수만큼 반복한다. | .data(dataFile) // dataFile배열의 개수를 계산하고, 이후 이어지는 메서드체인을 그 수만큼 반복한다. |
| .enter() // select 또는 selectAll에서 반환된 값이 있는지 확인하고, 있다면 각각에 데이터와 연결한다. 데이터가 연결될 값이 부족하다면, 빈 값을 생성해 데이터와 연결한다. | .enter() // select 또는 selectAll에서 반환된 값이 있는지 확인하고, 있다면 데이터와 연결한다. 데이터가 연결될 값이 부족하다면, 빈 값을 생성해 데이터와 연결한다. |
| .append('rect') // enter에서 반환 된 값에 <rect>요소를 준다. | .append('rect') // enter에서 반환 된 값에 <rect>요소를 준다. |
| .attr('fill', 'green') // 위에서 반환된 요소에 속성(fill)과 값(green)을 준다. 현재는 <rect fill="green" /> . | .attr('fill', 'green') // 위에서 반환된 요소에 속성(fill)과 값(green)을 준다. 현재는 <rect fill="green" /> . |
| .attr('height', (d) => {return d}) // 속성 뒤의 값이 들어간 자리에 있는 코드는 익명함수를 간소화해 표현한 코드이다. 괄호안의 'd'는 데이터배열의 값을 가진 임의의 변수이다. 'height'속성의 값에 d를 준다. | .attr('height', (d) => {return d}) // (d) => {return d} 는 익명함수를 간소화해 표현한 코드이다. 괄호안의 'd'는 데이터배열의 값을 가진 임의의 변수이다. 'height'속성의 값에 d를 준다. |
| .attr('width', 40) | .attr('width', 40) |
| .attr("x", (d, i) => {return 50 * i}) // x속성은 svg태그 공간 안에서 왼쪽아래의 한 점을 가리키고, x속성의 값은 한 점으로부터의 거리(가로)를 나타난다. 괄호안의 'i'는 데이터배열의 인덱스 값을 가진 임의의 변수이다. | .attr("x", (d, i) => {return 50 * i}) // x속성은 svg태그 공간 안에서 왼쪽아래의 한 점을 가리키고, x속성의 값은 한 점으로부터의 거리(가로)를 나타낸다. 괄호안의 'i'는 데이터배열의 인덱스 값을 가진 임의의 변수이다. |
| .attr("y", (d, i) => {return 100 - dataFile[i]}); | .attr("y", (d, i) => {return 100 - dataFile[i]}); |
| </script> | </script> |
| </body> | </body> |
| | </html> |
| </code> | </code> |
| {{:wiki:d3:막대차트_element.png?500|}} | {{:wiki:d3:막대차트_element.png?530|}} |
| {{:wiki:d3:기본막대차트.png?300|}} | {{:wiki:d3:기본막대차트.png?300|}} |
| |
| {{tag>eleven d3 차트그리기 막대차트}} | {{tag>eleven D3.js 차트그리기 막대차트}} |
