More Related Content
Similar to [week17] D3.js_Tooltip
Similar to [week17] D3.js_Tooltip (20)
More from neuroassociates
More from neuroassociates (17)
[week17] D3.js_Tooltip
- 10. ๊ฟ๊พธ๋๋ฐ์ดํฐ๋์์ด๋ ์์ฆ2[์ค์ต ] ์ค๋์ ๊ฒฐ๊ณผ๋ฌผ
[ ์ค๊ณ ]
2๋จ๊ณ : ํดํ์ด ๋ํ๋๋ค
1
2
3
4
5
ํดํ ์์ญ ๋ง๋ค๊ธฐ
ํดํ ์์น ์ค์
๋ฐ์ดํฐ ์ฝ์
๊ณต๊ฐ ๋ง๋ค๊ธฐ
๋ฐ์ดํฐ ์ฐ๋
๋ฐ์ดํฐ๋ฅผ ํ
์คํธ์ ์ฝ์
- 11. ๊ฟ๊พธ๋๋ฐ์ดํฐ๋์์ด๋ ์์ฆ2
์นํ์ด์ง ๋ด์์ ์์ญ์ ๊ตฌ๋ถํ๋ ํ๊ทธ. ์์ญ์ ํฌ๊ธฐ, ์์น ๋ฑ์ CSS์์ ์ค์ ํด์ผ ํ๋ค.
<div>
d3 Tooltip
<div>
</div>
div๋ฅผ ์ด์ฉํด ํดํ์ ์์ญ์ ๋ง๋ญ๋๋ค
ํ
์คํธ์์ ์ค๋ฐ๊ฟ์์ด ์ผ๋ถ๋ง ์คํ์ผ์ ์ ์ฉํ ๋ ์ฌ์ฉ
<span>
<p> ์ง์ญ๋ช
: <span></span> </p>
์ด ๋ถ๋ถ์ ๋ฐ์ดํฐ ๊ฐ์ ์ถ๊ฐํฉ๋๋ค
- 13. ๊ฟ๊พธ๋๋ฐ์ดํฐ๋์์ด๋ ์์ฆ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)์ ๋ณด์ด๊ฑฐ๋ ์จ๊ธธ ๋ ์ฌ์ฉ
- 14. ๊ฟ๊พธ๋๋ฐ์ดํฐ๋์์ด๋ ์์ฆ2
position
d3 Tooltip
ํ๊ทธ์ ์์น๋ฅผ ์ง์ ํ๋ ์คํ์ผ ์์ฑ.
top
left
Tip position์ ์์ฑ
์ ํ ์ค๋ช
static ๊ธฐ๋ณธ๊ฐ. ์ผ๋ฐ์ ์ธ ํ๋ฆ(์โํ)์ผ๋ก ์์๋ฅผ ๋ฐฐ์น
relative ์๋ ์์น์์ ์ง์ ๋ ๊ฐ๋งํผ ๋จ์ด์ง ๊ณณ์ ์์๋ฅผ ๋ฐฐ์น
absolute ๊ฐ์ฅ ๊ฐ๊น์ด ์์ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ง์ ํ ๊ฐ๋งํผ ๋จ์ด์ง ๊ณณ์ ์์๋ฅผ ๋ฐฐ์น
fixed ์น ๋ธ๋ผ์ฐ์ ์ ์ฒด ํ๋ฉด์ ๊ธฐ์ค์ผ๋ก ์์๋ฅผ ๊ณ ์ ์ํด
ํดํ(div)์ ์์น๋ฅผ ์ง์ ํ ๋ ์ฌ์ฉ
[ ์ฐธ๊ณ ๋งํฌ ] http://www.w3schools.com/cssref/pr_class_position.asp
- 15. ๊ฟ๊พธ๋๋ฐ์ดํฐ๋์์ด๋ ์์ฆ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)์ ์์น๋ฅผ ๊ณ์ฐํ ๋ ์ฌ์ฉ
- 16. Neuro Associates
ใป Portfolio : neuroassociates.co.kr/portfolio
ใป Address : ์์ธํน๋ณ์ ๋งํฌ๊ตฌ ์์๋ 145-1 6F
ใป Site : neuroassociates.co.kr
ใป Mail : neuro.associates.consulting@gmail.com or info@neuroassociates.co.kr
ใป SNS : www.facebook.com/neuroassociatessns
ใป Phone : 02-334-2013