Day1－前言：三十天成为D3好手

本篇大纲：

1. 为何选此主题
2. 为何不使用框架
3. 这三十天要讲的大纲
4. Github 程序码与 Github Page

为何会选 D3.js 这个主题

磨了好久终於决定要开赛了(其实是再不开就不用开了)！轻松的第一天开赛感言，就先来讲讲我为什麽会选这个主题吧！

之前在转职前端工程师的过程中，就蛮常遇到需要绘制图表的需求，也蛮常听到不少人想学绘制图表的工具。我觉得最主要的原因有几点：

1. 图表能将繁杂的数据视觉化，让使用者能简单地获得想要的资讯
2. 炫炮的图表更能吸引使用者目光，顺便展现一下工程师有多厉害

为了因应这些需求，市面上出现很多绘制图表的JS函式库，例如：D3.js、C3.js、charts.js等等，其中自由度最大、同时也最难学的便是 D3.js。我自己是由於公司的专案需要一些客制化的功能，在试过几种不同的图表函式库後，决定使用 D3.js 这个自由度比较大的图表函式库制作。而在学习 D3.js 的过程中，我发现它真的是个强大又有趣的工具，不仅仅具备高度自由，能客制化各种需求让图表跟使用者互动，甚至能结合 three.js 等等函式库做出酷炫的3D的图表。

但也因为 D3.js 版本更新快速（作者太勤劳是想逼死谁）、拥有许多 API 等等因素，让它的学习门槛相较其他函式库来得更高。我自己学习时遇到的困难点是：

1. D3.js 的官网不太好懂：官网上其实只是条列出各种 API 跟它的使用目的，而作者创办的Observable网站也比较偏向让大家展示制作的图表跟程序码，实际的解释跟教学较少
2. 虽然已经有很多大大们写了各种 D3.js 的教学文，但因为 D3.js 版本更新很快，常常遇到版本不同造成程序码跑不动等等问题
3. 制作一些客制化功能时，相关的教学比较少，只能零散地在不同文章、教学影片中找线索

我觉得我遇到的这些困扰，一定也曾是其他学习 D3.js 的人遇过的。因此，为了帮助未来想学习 D3.js 的人，同时也给自己一个挑战，我决定参加这次的铁人赛，并在三十天内从零开始解释D3.js的原理、绘图方式、客制化功能制作，以及从基础到进阶的图表绘制。希望看完这三十天的人，能一步步制作出自己想要的图表！废话不多说，现在就跟我一起进入D3的世界吧！

为何不使用框架

这系列我将用原生的 JS 与 d3.js 自己的方法去绘制图表。可能有些人会问：为什麽不搭配Angular、React、 Vue 之类的框架使用呢？原因有三：

1. 已经有不少人写过搭配框架的用法了
2. 我认为只要充分了解 D3.js 的绘制图表原理、知道它怎麽去处理资料跟 DOM 元素，以及各种 API 的运用，之後再去搭配框架使用都能很快上手
3. 铁人赛的篇幅有限，我希望能在一个月内让大家都能充分了解D3.js

综合上述几点原因，因此这次就决定就先不搭配框架撰写了～

本系列大纲

开始阅读这篇铁人赛之前，先来看看我这次预计要讲的内容大纲吧～初接触 D3 的人可以参考这份大纲，知道自己能学到什麽；已经掌握 D3 的人则可以按照自己想了解的功能，跳到相对应的章节～

大纲如下：

Day1：前言：三十天成为 d3.js 好手
Day2：D3 基础介绍
Day3：开始D3.js 前，先认识SVG
Day4：D3.js 选择器 Selection
Day5：D3.js 资料绑定 Data Binding：data() vs datum()
Day6：D3.js 资料绑定 Data Binding：enter、update、exit
Day7：D3.js 不同格式档资料汇入的 API
Day8：D3.js 资料整理的 API 们 ⇒ Array、Time Format、number Format、Random
Day9：D3.js 绘制形状的 Helper Functions
Day10：D3.js 动画 Transition
Day11：D3.js 互动事件 ⇒ 滑鼠事件 Mouse Event
Day12：D3.js 小工具 Tooptips
Day13：D3.js 拖曳 Drag
Day14：D3.js 原力 Force
Day15：D3.js 缩放 Zoom
Day16：D3.js 选取区间 Brush
Day17：D3.js 比例尺 Scale()
Day18：D3.js 轴线与刻度 Axis() & Ticks()
Day19：D3.js 让图表RWD起来！
Day20 ～ Day26：D3.js 基础图表与互动 ⇒ 圆饼图、散点图、长条图、复数长条图、堆积长条图、折线图 等等
Day27 ～ Day30：D3.js 进阶图表与互动 ⇒ 气泡图、甜甜圈图、合并图表、文字云、地图等等

本系列主要分成两部分：

1. 前二十天会一一讲解 D3.js 的重要概念，了解该如何查找官方文件、怎麽使用不同的 API
2. 之後的十天则是实际运用这些观念与API去绘制图表
   • 前五天讲基础的、简单的、你一定看过的图表
   • 後五天则是进阶讲解难度较高、较复杂的图表

这样一系列讲解＋实际演练下来，三十天後大家绝对能彻底掌握 D3！

Github Page 图表与 Github 程序码

除了铁人赛的文章外，我也将此系列制作的程序码与图表放上 Github 跟 Github Page上，让想看程序码或直接看图表互动方式的人，能更方便的浏览。需要的人请自行取用～