์๋
ํ์ธ์,
c3์ ์ต์ d3js ์๊ตฌ ์ฌํญ์ ๋ฌด์์
๋๊น?
๋ค์๊ณผ ๊ฐ์ ํญ๋ชฉ์ผ๋ก d3.js์ฉ ์ต์ ๋น๋๋ฅผ ์์ฑํ๊ณ ์ถ์ต๋๋ค.
import {scaleLinear} from "d3-scale";
D3 ๋ฌธ์์์: "D3๋ ES2015 ๋ชจ๋์ ์ฌ์ฉํ์ฌ ์์ฑ๋์์ต๋๋ค..." https://github.com/d3/d3
๋๊ตฌ๋ ์ง ๋ชฉ๋ก์ ๊ฐ์ง๊ณ ์๋ค๋ฉด ํ๋ฅญํ ์ ์์ต๋๋ค.
ํ์ฌ webpack๊ณผ C3 ์ฃผ๋ณ์ vue ๋ํผ๋ฅผ ์ฌ์ฉํ์ฌ Vuejs ์ ํ๋ฆฌ์ผ์ด์
์ ๊ตฌ์ถ ์ค์
๋๋ค. https://github.com/chryb/vue-c3 .
๋ด ๋ฒ๋ค ํฌ๊ธฐ๋ ํ๋์ ์์ ๊ทธ๋ํ์ ๋ํด ํฌ๋ฏ๋ก ๋ด ์ง๋ฌธ์
๋๋ค.
์ด ์์
์ d3 ํฌ๊ธฐ๋ฅผ ์ฝ 50% ์ค์
๋๋ค.
d3-array.js
d3-brush.js
d3-collection.js
d3-color.js
d3-dispatch.js
d3-ease.js
d3-format.js
d3-๋ณด๊ฐ.js
d3-๊ฒฝ๋ก.js
d3-scale-chromatic.js
d3-scale.js
d3-selection.js
d3-shape.js
d3-time-format.js
d3-timer.js
d3-transition.js
d3-zoom.js
์ ๋ C3์ ์ฌ์ฉ์ ์ ์ ๋น๋์ _๋งค์ฐ_ ๊ด์ฌ์ด ์์ผ๋ฉฐ, ์ฐ๋ฆฌ์ ์ฌ์ฉ ์ฌ๋ก์ ํ์ํ D3 ๋ชจ๋๋ง ๊ฐ์ ธ์ต๋๋ค.
(์: ํดํ, ํ๋/์ถ์ ๋ฐ ์ ํ์ด ์๋ ์๊ณ์ด ๊ธฐ๋ณธ ๋ผ์ธ ์ฐจํธ๋ง)
๊ทธ๋ฌ๋ Rollup/ES6 ๊ฐ์ ธ์ค๊ธฐ ํ๋ก์ ํธ์์ ์ ๋๋ก ์๋ํ๋๋ก ํ ์ ์์ต๋๋ค.
C3์ ์ฌ์ฉ์ ์ ์ ๋ฒ์ ์ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ์ ๋ํ ์์ ์์ /ํ(์๋นํ ํฌ๊ธฐ ์ค์ด๊ธฐ)์ ์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค!
์์ฒญ์ด ๋ง์ ๊ธฐ๋ฅ์ธ ๊ฒ ๊ฐ์ง๋ง ์๋ํ๋ ์์ ๋ฅผ ์ฐพ์ ์ ์์์ต๋๋ค.
์ด ์์ ์ d3 ํฌ๊ธฐ๋ฅผ ์ฝ 50% ์ค์ ๋๋ค.
d3-array.js
d3-brush.js
d3-collection.js
d3-color.js
d3-dispatch.js
d3-ease.js
d3-format.js
d3-๋ณด๊ฐ.js
d3-๊ฒฝ๋ก.js
d3-scale-chromatic.js
d3-scale.js
d3-selection.js
d3-shape.js
d3-time-format.js
d3-timer.js
d3-transition.js
d3-zoom.js
์์ ๋ด์ฉ์ config๋ก ์ด๋ป๊ฒ ๋ฒ์ญํฉ๋๊น? ๋๊ตฌ์๊ฒ ์๊ฐ ์์ต๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด ์์ ์ d3 ํฌ๊ธฐ๋ฅผ ์ฝ 50% ์ค์ ๋๋ค.
d3-array.js
d3-brush.js
d3-collection.js
d3-color.js
d3-dispatch.js
d3-ease.js
d3-format.js
d3-๋ณด๊ฐ.js
d3-๊ฒฝ๋ก.js
d3-scale-chromatic.js
d3-scale.js
d3-selection.js
d3-shape.js
d3-time-format.js
d3-timer.js
d3-transition.js
d3-zoom.js