9. Songyi Lim www.attrs.co.kr
D3.js 체인문법
구두점(.)으로 d3 메서드를 체인처럼 연결해 코드 한 줄로
여러 동작을 실행하는 기법. 각각의 메서드에서 처리한 후 결과값을
다음 메서드로 전달하기 때문에 순서가 중요하다.
Chain Syntax
10. Songyi Lim www.attrs.co.kr
자바스크립트 기본 개념 : 함수
function(name(인자)({(
(return(반환값(
};
함수 키워드
코드
함수 이름
‘함수’
특정한 작업을 수행하기 위해 필요한 일련의 구문
return 뒤에 따라오는 값(=반환값)을 함수의 결과로 변환.
동시에 함수를 종료시킨다. 반환=종료라고 이해할 수 있다.
21. Songyi Lim www.attrs.co.kr
척도: 입력되는 정의역(domain)과 출력되는 치역(range)을 매핑한 함수
d3.js scale( )
.domain( )
.range( )
입력되는 데이터 값의 범위
출력되는 범위 (단위: 픽셀)
d3.scale( )
22. Songyi Lim www.attrs.co.kr
d3.js scale( )
d3.scale.linear( )
d3.scale.ordinal( )
선형척도. 숫자, 날짜 등 일련의 연속적인 값을 갖는 척도.
서열척도. 이름, 항목 등 측정이 불가능한 값일 경우 사용하는 척도.
25. Songyi Lim www.attrs.co.kr
d3.min & d3.max
d3.min( )
d3.max( )
데이터 안의 최소값을 반환하는 함수
데이터 안의 최대값을 반환하는 함수
데이터 값이 많아질수록 최소값과 최대값을 직접 지정하기 힘들기 때문에 사용하는 함수
36. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 축과 척도 - axis
03bar_xaxis.html
축을 생성하는 함수
축을 생성할 때는 어떤 척도를 다뤄야 하는지
알려줘야 함.
축의 위치
가로축 세로축
top left
bottom right
37. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 축과 척도 - axis
03bar_xaxis.html
g 문서요소
• 그룹을 뜻함.
• 다른 문서 요소를 담는 역할.
• 트랜스폼 요소 적용 가능
call 함수
• 선택된 변수의 내용을 불러온다.
44. Songyi Lim www.attrs.co.kr
[ 실습 ] D3.js 축과 척도 - axis
08bar_ticks.html
• 축의 눈금 개수 지정.
• 개수에 따라 눈금값이 정확히 떨어지지 않으면 입력한 눈금개수 중 값이 정확히 떨어지
는 개수로 자동으로 조정해서 보여줌.