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

차이

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

차이 보기로 링크

--- wiki:d3:막대차트_그리기 [2020/07/16 13:36]
jskim
+++ wiki:d3:막대차트_그리기 [2023/01/13 18:44] (현재)
@@ 줄 18: / 줄 18: @@
       svg.selectAll('rect')     // <rect>요소를 모두 찾는다. 현재 DOM안에 <rect>는 하나도 없기 때문에 빈 값을 반환한다.
         .data(dataFile)         // dataFile배열의 개수를 계산하고, 이후 이어지는 메서드체인을 그 수만큼 반복한다.
-        .enter()                // select 또는 selectAll에서 반환된 값이 있는지 확인하고, 있다면 각각에 데이터와 연결한다. 데이터가 연결될 값이 부족하다면, 빈 값을 생성해 데이터와 연결한다.
+        .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('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("x", (d, i) => {return 50 * i})  // x속성은 svg태그 공간 안에서 왼쪽아래의 한 점을 가리키고, x속성의 값은 한 점으로부터의 거리(가로)를 나타낸다. 괄호안의 'i'는 데이터배열의 인덱스 값을 가진 임의의 변수이다.
         .attr("y", (d, i) => {return 100 - dataFile[i]});
    </script>

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