| 양쪽 이전 판
이전 판
다음 판
|
이전 판
|
wiki:d3:막대차트_그리기 [2020/07/16 09:30]
jskim |
wiki:d3:막대차트_그리기 [2023/01/13 18:44] (현재)
|
| 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) => {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> |
| </html> | </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 차트그리기 막대차트}} |
