Day2－D3基础介绍

轻松的前言看完了，今天我们就来正式进入D3的世界吧！

本篇大纲：
基础介绍与运作原理、使用目的/优缺点、版本变化、酷炫D3网站、推荐阅读与参考资源（含官方文件）

D3 基本介绍与运作原理

D3.js 是由 Mike Bostock 开发的一套 JS 函式库，能用来操作 Document Object Model (DOM) 树状资料，将资料内容视觉化的工具。D3.js 全名是 Data-Driven Documents (资料驱动文件)，这三个 D 也是 D3 的由来～而从它的英文名字就知道，这个函式库跟数据资料（data）关系一定很紧密！

D3.js 很常被用在建立图表，但它和 Canvas 的运作方式完全不同。它是操作 DOM 树的 JS 函式库，因此基本的建构元素不是圆或矩形等图案，而是用以下方的方式：

• 建立图案：使用 node 节点跟 Dom 元素 去建立图形 (画面渲染部分使用 SVG )
• 图案样式：透过 属性 (attribute) 来调整元素的样式
• 目前位置：在 DOM 树中选择节点，非画布上的ＸＹ座标

D3 主要是搭配 SVG 去建立图表，但它并不只限於操作 SVG，而是能操作页面上所有的 DOM 元素。对於没有使用过D3.js的人来说，只看上段叙述可能有点难懂，但如果提到另外一套一样是操作 DOM 树的 JS 函示库 — JQuery，应该就比较好理解了。JQ 跟 D3 一样都是操作 DOM 元素，因此有很多地方相似，而且 D3 的选择器跟 JQ 一样都是使用 CSS Selector。如果现在还不太清楚也没关系，等 Day4 讲解到 D3 selection 就会懂了~

学习D3前需要了解的技术：

看完了D3的基本介绍与运作原理後，能得知在学 D3.js 之前，还需要对以下这些网页技术有基本的掌握：

• DOM API 与 事件模型 (event model)
• CSS 选择器 (Selector) 与 属性项 (Property)
• JS 物件模型
• SVG

虽然 D3已经把上述的技术变得很容易使用，但使用者还是需要对这些网页技术有一定的了解与掌握（尤其是SVG）。这也是为什麽蛮多新手觉得D3的门槛很高、学习困难。如果你的网站并不需要非常酷炫、客制化的图表，其实还有很多更好上手的函式库可以选择，下面会再跟大家介绍我自己用过的两套简单方便图形函式库。

D3的特色：

接下来我们来看看 D3 的特色跟它的优缺点吧！我觉得D3的特色有以下几点：

• 需要运用到 html、JS、data 的技术来建构图表
• 画面渲染的部分是使用SVG，但也能替换成其他套件：canvas、Tree.js、Pixi.js
• 内建许多 API(总共有三十种分类)，这些 API 能协助进行资料处理、画面显示计算
  ＊这点也是许多新手觉得困难的地方。而且 API 变动调整蛮快，网路上查找资料时，如果使用旧的或版本不对的程序码可能无法动
  
  (图片来源：多奇数位 D3 分享会)

D3 优点

一套工具总是有它的优点，才会让人愿意使用嘛~所以我们现在来讲讲 D3.js 的优点吧！

1. 自由度高，能建立各式互动图表
2. SVG 也是DOM 之一，包含许多 DOM 的互动 (hover、mouseover)，可以制作更精确的使用者互动

D3 缺点

但除了优点之外，D3 也有几项出名的缺点

1. 学习门槛高

   • 因为内建多种 API ，版本迭代又快
   • 需要了解许多基本技术：DOM / Event Modal、CSS selection、 JS Object 、SVG

2. 由於画面是使用SVG渲染，但大量的 SVG 会造成 DOM 渲染的效能瓶颈 (太多 DOM元素 在画面上)。
   ＊解决方式是将画面渲染改成 Canvas 等其他方式呈现。目前许多图表套件也已经改用Canvas处理，就是想跳过效能问题

3. 版本迭代快，新版的资源少（特别是中文）。所以很常查找资料时，按照别人写的code却跑不动，最後一查才发现是版本不同。

版本变化

几乎每个讲解D3的人，都会提到D3的版本变化。因为它的 第3版 (v3) 跟 第4版 (v4) 差异巨大，很多底层撰写的方式都改掉了。因此直接把第三版的程序码拿来用的话，你连图片都看不到，眼前只有一片空白。

但是！偏偏 v3 是最多人分享教学、范例程序码、酷炫图表使用的版本，因此现在网路上一查还是很多程序码都是用 v3 写的。如果傻傻想直接套用网路上查到的程序码，很可能根本跑不动。而且目前D3已经出到第七版(v7)了，但很多中文的教学资源却停留在v5，因此我这次会使用 v7 版本来讲解，希望能造福更多D3苦手。

D3 替代品：

上面讲到学习D3的缺点，以及有更多能替代D3函式库，我们就先来谈谈想学 D3 的人通常有哪些原因吧！

我觉得会想学习并使用D3.js的人，不外乎就这两个原因：

1. 机歪的老板或客户有各种天马行空客制化的功能想实现
2. 想做出炫炮的图表名留青史

但如果你并没有这两种需求，只是想做出简单、清晰呈现数据的图表，这样的话就能考虑使用

• charts.js
• C3.js

它们两个比 D3.js 好上手太多了，能用很容易的方式制作出图表~ C3.js 更是基於 D3 去简化的工具 (作者觉得 D3太难了，想弄得简单点)。其实好用又简单的函式库还很多，我这边只是列出我用过觉得简单、方便、好上手的工具。如果没有客制化需求的人推荐使用~

但毕竟这系列是讲解 D3.js！所以话又说回来，虽然 D3 的确有点难学，不过一旦了解它原理後，会发现它真的是功能强大的工具。而且画出超炫图表的时候，成就感直接爆棚！为了吸引大家愿意接着看完这系列，我们就先来看看 D3能做出哪些酷炫的东东吧！

D3 做出的酷东西

D3 不只是能制作酷炫的图表，还能做出整个酷炫的网页。以下这些是我觉得酷炫、互动性佳、又能清晰传达想说资讯的网站：

• womenwill (性别平等议题，Awwwards 上得奖的D3网站)
  这个是我最喜欢的网站，它的整个背景都用不同颜色的点点组成，巧妙运用动态与颜色传达议题。而且点点还会与滑鼠互动，让人觉得有趣又新奇

• smartcities (城市探索，Awwwards 上得奖的D3网站)
  网站运用卷轴滚动逐步秀出图表，滑鼠 hover 过去时还能凸显所在的位置，非常有趣

• investmentcalculator (生涯理财，Awwwards 上得奖的D3网站)

• 用数据看台湾
  我个人非常喜欢的网站。它是运用台湾政府的公开资料，以图表的方式展现目前国家的各种现状。前阵子限电、缺水时，这里的「台湾即时用电图表」、「水库即时水情图表」也在社群火红了一阵子。我觉得这个才是使用图表的真谛，能清楚地将复杂、普通凡人不会去看、但却又跟我们生活息息相关的数据，用图表简单的呈现给大家。

• 联合新闻网-数据看疫情

推荐阅读与参考资源

看完上面使用 D3 做出的酷网站、炫图表後，有没有手痒难耐，想赶快了解 D3 呀？如果等不及这系列的更新，想自己去查找资料；或是想再更深入了解 D3 的话，这边也推荐各种我觉得很棒的资源给大家～

文章教学

• D3官方API文件、D3 Observal 部落格
  虽然我一开始学D3时，觉得官方文件实在是难看得要死，实在是无法从这个文件看懂怎麽写D3。但我後来发现，由於 D3的版本变化实在太快了，网路文章教学使用的程序码常常无法直接套用 (而且很多都是参数等小细节改了)，所以最後还是得回归到官方文件查要用的API，以及它的相关细节设定。查完後确定用法，再搭配文章的程序码去调整，这样才能顺利画出图表。所以我在这边还是介绍 D3官方文件，之後的教学也会在必要时候教大家如何看文件。

• Kuro D3教学PDF (v5)

• ShawnL 铁人赛：小白也能轻松了解的 Vue.js 与 D3.js (v5)

• AndyChen铁人赛： React + D3 的正确姿势 (v5)

• 出发吧阿灏仔铁人赛：D3.js资料视觉化的浪漫突进 (v5)

• D3简体中文手册 (v4)

• Tutorial Teacher (英文，v4)

影片教学

1. 多奇数位 D3 分享会 (v5)

范例程序码

1. The D3.js Graph Gallery (图表丰富但有点旧，要翻新程序码)

Github Page 图表与 Github 程序码

最後，这边一样附上我在这系列文章的程序码与图表Github 、 Github Page，需要的人请自行取用～