[week17] d3.js_tooltip
TRANSCRIPT
Data DesignerD3.js 07: D3.js Interative - Tooltip
꿈꾸는데이터디자이너�시즌2오늘의 수업
이론 실습
1. 툴팁을 배우기 위한 각종 원리 1. 툴팁 실습
꿈꾸는데이터디자이너�시즌2d3 Tooltip
Tooltip?요소에 커서를 올리면 세부 데이터값을 보여주는 기능.
꿈꾸는데이터디자이너�시즌2d3 Tooltip
Tooltip을 만드는 방법은 여러가지가 있다
꿈꾸는데이터디자이너�시즌2d3 Tooltip
툴팁을 비롯한 다양한 인터랙티브 효과는 D3.js 뿐만 아니라 HTML/CSS/다양한 JavaScript 라이브러리를
엮어서 만들어낸다
꿈꾸는데이터디자이너�시즌2
1. Tooltip을 그리기 위한 영역 그리는 법 2. 위치 정하기 3. HTML의 ‘Class’ 개념 4. 데이터값 연동하는 법
d3 Tooltip
Tooltip을 만들기 위해 알아야 할 것들
꿈꾸는데이터디자이너�시즌2
실습
꿈꾸는데이터디자이너�시즌2d3 Tooltip
오늘의 결과물
꿈꾸는데이터디자이너�시즌2[실습 ] 오늘의 결과물
[ 설계 ]
1단계 : 각 원 위에 마우스를 올리면 색상이 변한다
.on(“mouseover”)
fill = #dddddd fill = red
꿈꾸는데이터디자이너�시즌2[실습 ] 오늘의 결과물
[ 설계 ]
2단계 : 툴팁이 나타난다
1
2
3
4
5
툴팁 영역 만들기
툴팁 위치 설정
데이터 삽입 공간 만들기
데이터 연동
데이터를 텍스트에 삽입
꿈꾸는데이터디자이너�시즌2
웹페이지 내에서 영역을 구분하는 태그. 영역의 크기, 위치 등은 CSS에서 설정해야 한다.
<div>
d3 Tooltip
<div>
</div>
div를 이용해 툴팁의 영역을 만듭니다
텍스트에서 줄바꿈없이 일부만 스타일을 적용할 때 사용
<span>
<p> 지역명 : <span></span> </p>
이 부분에 데이터 값을 추가합니다
꿈꾸는데이터디자이너�시즌2
HTML요소에 특정한 이름을 붙이는 것. 같은 CSS 속성을 적용할 때 많이 쓰인다.
Class
d3 Tooltip
<div class=“a”></div> <div class=“b”></div>
.a { border : white; background-color : red;
}
.b { border : yellow; background-color :gray;
}
꿈꾸는데이터디자이너�시즌2
display
[ 참고링크 ] http://www.w3schools.com/cssref/pr_class_display.asp
d3 Tooltip
요소를 어떻게 보여줄 지 설정. 태그마다 기본 속성값이 다르다.
유형 설명
none 보이지 않음
block 기본값이 가로 100%. width / height을 지정할 수 있음. 줄바꿈 O
inline 한 줄에 여러개가 붙는다. width/height을 지정할 수 없음. 줄바꿈 X
inline-block inline요소와 block요소의 혼합. 줄바꿈이 되지 않지만 크기를 지정할 수 있음.
inline
block
block
inline
툴팁(div)을 보이거나 숨길 때 사용
꿈꾸는데이터디자이너�시즌2
position
d3 Tooltip
태그의 위치를 지정하는 스타일 속성.
top
left
Tip position의 속성
유형 설명
static 기본값. 일반적인 흐름(상→하)으로 요소를 배치
relative 원래 위치에서 지정된 값만큼 떨어진 곳에 요소를 배치
absolute 가장 가까운 상위 요소를 기준으로 지정한 값만큼 떨어진 곳에 요소를 배치
fixed 웹 브라우저 전체 화면을 기준으로 요소를 고정시킴
툴팁(div)의 위치를 지정할 때 사용
[ 참고링크 ] http://www.w3schools.com/cssref/pr_class_position.asp
꿈꾸는데이터디자이너�시즌2
d3.event.pageX & pageY
[ 참고링크 ] https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX
d3 Tooltip
툴팁의 위치를 계산하기 위해서는
1) 마우스가 올려져 있는 요소를 찾아서 2) 요소의 위치를 인식한 다음 3) 요소의 위치값을 툴팁의 위치값에 전달해야 함
pageX
pageY
선택된 요소의 X좌표와 Y좌표를 인식해 반환하는 함수
툴팁(div)의 위치를 계산할 때 사용
Neuro Associates
· Portfolio : neuroassociates.co.kr/portfolio
· Address : 서울특별시 마포구 상수동 145-1 6F
· Site : neuroassociates.co.kr
· Mail : [email protected] or [email protected]
· SNS : www.facebook.com/neuroassociatessns
· Phone : 02-334-2013