๐ Reference
๐ Index
line
- ๋ผ์ธ ์์ฑ๊ธฐ๋ spline ๋๋ polyline์ ์์ฑํ๋ค.
- spline (์คํ๋ผ์ธ)
- ์คํ๋ผ์ธ์ ๋ช๊ฐ์ ์ ์ ๊ธฐ์ค์ผ๋ก ๋ถ๋๋ฌ์ด ๊ณก์ ์ ๊ทธ๋ฆฌ๋ ์ปดํจํฐ ๊ทธ๋ํฝ์ค์ ๋ฐฉ๋ฒ์ด๋ค.
- ๋นํธ๋งต ํฐํธ๋ฅผ ๋ถ๋๋ฝ๊ฒ ๋ง๋๋ ํธํฌํ์
ํฐํธ, 3D ๋ชจ๋ธ๋ง ๋ฑ์์ ๋ง์ด ํ์ฉ๋๋ ์ ์ฉํ ๋๊ตฌ์ด๋ค.
- ์คํ๋ผ์ธ์ ํ๋ฉด์ ์์ ๋กญ๊ฒ ๊ทธ๋ ค์ผ ํ๋ฏ๋ก ๋งค๊ฐ๋ณ์ ํจ์๋ก ๋ชจ๋ธ๋ง๋๋ฉฐ, ์ ์ด์ ์ ๋ํ๋ด๋ ๊ธฐํ ํ๋ ฌ, ํผํฉ ํจ์๋ฅผ ๋ํ๋ด๋ ๊ธฐ์ ํ๋ ฌ์ ๊ณฑ์ผ๋ก ํํ๋๋ค.
- ํผํฉํจ์์ ์ข
๋ฅ์ ๋ฐ๋ผ ์ฌ๋ฌ๊ฐ์ง ์คํ๋ผ์ธ ๋ฐฉ๋ฒ์ด ์๋ค.
- polyline
- ๋ค๊ฐ์ ๋ถ
- ์ฐ์ํ๋ ์ง์ , ํธ๋ฅผ ์ด์ฉํ์ฌ ์ ์ ๊ทธ๋ฆฌ๋ ๋ฐฉ์์ผ๋ก ๊ฐ์ฒด์ ์์ ์๊ด์์ด ํ๋์ ๊ฐ์ฒด๋ก ์ธ์๋๋ ์
- ์ ์ ๊ณ์ธต์ ์ฃ์ง ๋ฒ๋ค๋ฆฌ(hierarchical edge bundling)์ ๋งํฌ์ ๊ฐ์ ๋ค๋ฅธ ๋ง์ ์๊ฐํ ์ ํ์๋ ๋ํ๋๋ค.
- ๊ทธ๋ํฝ์ ์ง์ ์ ์ดํ๊ณ
SVG
์ Canvas
๋ฅผ ๋ชจ๋ ์ง์ํ๋ฏ๋ก ๊ฐ๋ฅ์ฑ์ด ๋ฌด๊ถ๋ฌด์งํ๋ค.
d3.line
- ๊ธฐ๋ณธ ์ค์ ์ผ๋ก ์๋ก์ด ๋ผ์ธ ์์ฑ๊ธฐ๋ฅผ ์์ฑํ๋ค.
- x ๋๋ y๊ฐ ์ง์ ๋๋ฉด ํด๋น ์ ๊ทผ์๋ฅผ ์ง์ ๋ ํจ์ ๋๋ ์ซ์๋ก ์ค์ ํ๊ณ ์ด ๋ผ์ธ ์์ฑ๊ธฐ๋ฅผ ๋ฐํํ๋ค.
- d3.line์ ์ผ๋ จ์ ์ ์ ๋ฐ๋ฅด๋ ๋ชจ์์ ๋ง๋ ๋ค.
- ๊ธฐ๋ณธ ๊ณก์ ๋ณด๊ฐ๊ธฐ(interpolator)๋ ์ ์ ์ง์ ์ธ๊ทธ๋จผํธ์ ์ฐ๊ฒฐํ์ฌ ๋ค๊ฐํ ์ฒด์ธ ๋๋ ํด๋ฆฌ๋ผ์ธ์ ๋ง๋ ๋ค.
line
- ์ฃผ์ด์ง ๋ฐ์ดํฐ ๋ฐฐ์ด์ ๋ํ ๋ผ์ธ์ ์์ฑํ๋ค.
- ์ด ๋ผ์ธ ์์ฑ๊ธฐ์ ๊ด๋ จ ๊ณก์ ์ ๋ฐ๋ผ ์ฃผ์ด์ง ์
๋ ฅ ๋ฐ์ดํฐ๋ ๋ผ์ธ ์์ฑ๊ธฐ๋ก ์ ๋ฌ๋๊ธฐ ์ ์ x-๊ฐ์ผ๋ก ์ ๋ ฌ๋์ด์ผ ํ ์๋ ์๋ค.