[week17] d3.js_tooltip

Data DesignerD3.js 07: D3.js Interative - Tooltip

꿈꾸는데이터디자이너�시즌2오늘의 수업

이론 실습

1. 툴팁을 배우기 위한 각종 원리 1. 툴팁 실습

꿈꾸는데이터디자이너�시즌2d3 Tooltip

Tooltip?요소에 커서를 올리면 세부 데이터값을 보여주는 기능.


Tooltip을 만드는 방법은 여러가지가 있다


툴팁을 비롯한 다양한 인터랙티브 효과는 D3.js 뿐만 아니라 HTML/CSS/다양한 JavaScript 라이브러리를

엮어서 만들어낸다

꿈꾸는데이터디자이너�시즌2

1. Tooltip을 그리기 위한 영역 그리는 법 2. 위치 정하기 3. HTML의 ‘Class’ 개념 4. 데이터값 연동하는 법

d3 Tooltip

Tooltip을 만들기 위해 알아야 할 것들


실습


오늘의 결과물

꿈꾸는데이터디자이너�시즌2[실습 ] 오늘의 결과물

[ 설계 ]

1단계 : 각 원 위에 마우스를 올리면 색상이 변한다

.on(“mouseover”)

fill = #dddddd fill = red

꿈꾸는데이터디자이너�시즌2[실습 ] 오늘의 결과물

[ 설계 ]

2단계 : 툴팁이 나타난다

1

2

3

4

5

툴팁 영역 만들기

툴팁 위치 설정

데이터 삽입 공간 만들기

데이터 연동

데이터를 텍스트에 삽입


웹페이지 내에서 영역을 구분하는 태그. 영역의 크기, 위치 등은 CSS에서 설정해야 한다.

<div>

d3 Tooltip

<div>

</div>

div를 이용해 툴팁의 영역을 만듭니다

텍스트에서 줄바꿈없이 일부만 스타일을 적용할 때 사용

<span>

<p> 지역명 : <span></span> </p>

이 부분에 데이터 값을 추가합니다


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;

}


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)을 보이거나 숨길 때 사용

http://www.w3schools.com/cssref/pr_class_display.asp


position

d3 Tooltip

태그의 위치를 지정하는 스타일 속성.

top

left

Tip position의 속성

유형 설명

static 기본값. 일반적인 흐름(상→하)으로 요소를 배치

relative 원래 위치에서 지정된 값만큼 떨어진 곳에 요소를 배치

absolute 가장 가까운 상위 요소를 기준으로 지정한 값만큼 떨어진 곳에 요소를 배치

fixed 웹 브라우저 전체 화면을 기준으로 요소를 고정시킴

툴팁(div)의 위치를 지정할 때 사용

[ 참고링크 ] http://www.w3schools.com/cssref/pr_class_position.asp

http://www.w3schools.com/cssref/pr_class_position.asp


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)의 위치를 계산할 때 사용

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX

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

[week17] d3.js_tooltip

Data & Analytics