Home - zziuni/d3 GitHub Wiki

D3.js๋Š” ๋ฐ์ดํ„ฐ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฌธ์„œ์ˆ˜์ •์„ ํ•˜๊ธฐ ์œ„ํ•œ Javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. D3.js๋Š” HTML, SVG, CSS๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ์— ํ™œ๊ธฐ๋ฅผ ๋ถ€์–ด์ค€๋‹ค. ์›น ํ‘œ์ค€์ƒ์—์„œ D3์˜ ์ฃผ์•ˆ์ ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐ•๋ ฅํ•œ ๋น„์ฃผ์–ผ๋ผ์ด์ œ์ด์…˜ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๊ฒฐํ•ฉํ•œ ์ž์ฒด ํ”„๋กœ์ž„์›Œํฌ๋กœ ์ž‘์—…ํ•˜์ง€ ์•Š์•„๋„ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์˜ ํ˜ธํ™˜์„ฑ์„ ๋ณด์žฅํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  DOM ์ˆ˜์ •์— ๋Œ€ํ•ด์„œ ๋ฐ์ดํ„ฐ ๊ด€์ ์—์„œ ์ ‘๊ทผํ•œ๋‹ค.

Resources

Browser Support

D3๋Š” ์†Œ์œ„ '๋ชจ๋˜ ๋ธŒ๋ผ์šฐ์ €'๋ฅผ ์ง€์›ํ•œ๋‹ค. ์ด ๋ง์€ ์ผ๋ฐ˜์ ์œผ๋กœ IE8 ์ด์ „ ๋ฒ„์ „์„ ์ œ์™ธํ•œ ๋ธŒ๋ผ์šฐ์ €๋“ค์„ ๋งํ•œ๋‹ค. D3๋Š” ํŒŒ์ด์–ดํญ์Šค, ํฌ๋กฌ(ํฌ๋กœ๋ฏธ์—„), ์‚ฌํŒŒ๋ฆฌ(WebKit), ์˜คํŽ˜๋ผ, IE9์—์„œ ํ…Œ์ŠคํŠธํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ D3์˜ ์ผ๋ถ€๋Š” ์˜ค๋ž˜๋œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•  ์ง€๋„ ๋ชจ๋ฅธ๋‹ค. D3์˜ ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” Javascript์™€ W3C DOM API๋งŒ ํ•„์ˆ˜ ์‚ฌํ•ญ์œผ๋กœ ์ „์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. IE8์„ ์œ„ํ•œ ํ˜ธํ™˜์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ Aight๋ฅผ ์ถ”์ฒœํ•œ๋‹ค. D3๋Š” Selectors API Level 1๋ฅผ ์‚ฌ์šฉํ•˜์ง€๋งŒ ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด์„œ Sizzle๋ฅผ D3๋ฅผ ๋กœ๋“œํ•˜๊ธฐ ์ „์— ๋กœ๋“œํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„์€ SVG์™€ CSS3 Transitions๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•„์š”ํ•˜๋‹ค. D3๋Š” ์ด๋ฅผ ์œ„ํ•œ ํ˜ธํ™˜์„ฑ ๊ณ„์ธต์ด ์—†์œผ๋ฏ€๋กœ ์—ฌ๋Ÿฌ๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ด ํ‘œ์ค€์„ ์ง€์›ํ•˜์ง€ ์•Š์œผ๋ฉด ์•ˆํƒ€๊น์ง€๋งŒ. ์•ˆ๋…•~

Installing

์ตœ์‹  ๋ฒ„์ „์€ ์—ฌ๊ธฐ์„œ ๋‹ค์šด ๋ฐ›๋Š”๋‹ค.

์ตœ์‹  ๋ฒ„์ „์„ ๋ฐ”๋กœ ๋งํฌ ๊ฑธ๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•œ๋‹ค.

<script src="http://d3js.org/d3.v3.min.js"></script>

ํ…Œ์ŠคํŠธ๊ฐ€ ํฌํ•จ๋œ ์ €์žฅ์†Œ ์ „์ฒด๋ฅผ ์›ํ•˜๋Š” ๊ฒฝ์šฐ.

https://github.com/mbostock/d3/zipball/master

์•„๋‹ˆ๋ฉด ์ปค๋งจ๋“œ ๋ช…๋ น์–ด.

git clone git://github.com/mbostock/d3.git

๋กœ์ปฌ์—์„œ ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ, ๋กœ์ปฌ ํŒŒ์ผ์‹œ์Šคํ…œ ๋ฐ–์˜ ํŒŒ์ผ์— ์ ‘๊ทผํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์—„๊ฒฉํ•œ ๊ถŒํ•œ์œผ๋กœ ๋ง‰์„ ์ˆ˜๋„ ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๋กœ์ปฌ์—์„œ d3.xhr๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ๋ฐ˜๋“œ์‹œ ๋กœ์ปฌ ์›น์„œ๋ฒ„๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค. ์ด ๊ฒฝ์šฐ, ํŒŒ์ด์ฌ์˜ ๋นŒํŠธ์ธ ์„œ๋ฒ„๋ฅผ ๋Œ๋ฆฌ ์ˆ˜๋„ ์žˆ๋‹ค.

python -m SimpleHTTPServer 8888 &

ํŒŒ์ด์ฌ3์—์„œ๋Š”

python -m http.server 8888 &

์ด ๋ช…๋ น์„ ์‹คํ–‰ํ•œ ํ›„์— http://localhost:8888/examples/๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ๋„์šด๋‹ค.

D3๋ฅผ ์‚ฌ์šฉํ•œ ๋น„์ฃผ์–ผ๋ผ์ด์ œ์ด์…˜์„ ์ƒˆ๋กœ ๋งŒ๋“ค ๋ชฉ์ ์ด๋ผ๋ฉด, D3 ๋ ˆํŒŒ์ง€ํ† ๋ฆฌ๋กœ ์กฑํ•˜์ง€๋งŒ ๊ทธ๊ฒŒ ์•„๋‹ˆ๊ณ , D3์— ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ๋ฒ„๊ทธ๋ฅผ ๊ณ ์น˜๊ฑฐ๋‚˜ ์œ ๋‹›ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒฝ์šฐ๋ผ๋ฉด D3 ๋ ˆํŒŒ์ง€ํ† ๋ฆฌ๋ฅผ ํฌํฌ ๋ฐ›๊ณ  Node.js๋ฅผ ์„ค์น˜ ํ•œ๋‹ค. D3 ๋ ˆํŒŒ์ง€ํ† ๋ฆฌ ๋ฃจํŠธํด๋”์—์„œ D3์˜ ์˜์กด์„ฑ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ ํ•  ์ˆ˜ ์žˆ๋‹ค.

npm install

ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ ค๋ฉด ๋‹ค์Œ์ฒ˜๋Ÿผ ํ•œ๋‹ค.

make test
โš ๏ธ **GitHub.com Fallback** โš ๏ธ