C3: ์ตœ์†Œ d3js ๊ฐ€์ ธ์˜ค๊ธฐ ๋ชฉ๋ก

์— ๋งŒ๋“  2018๋…„ 07์›” 09์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: c3js/c3

์•ˆ๋…•ํ•˜์„ธ์š”,
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

๋ชจ๋“  3 ๋Œ“๊ธ€

์ด ์ž‘์—…์€ 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๋กœ ์–ด๋–ป๊ฒŒ ๋ฒˆ์—ญํ•ฉ๋‹ˆ๊นŒ? ๋ˆ„๊ตฌ์—๊ฒŒ ์˜ˆ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰