D3.js 系列 (一) D3 简介 + Observable -- D3 在线开发编辑工具简介

D3 VS jQuery

刚开始接触 D3，很容易会联想到 jQuery，因为他们在操作元素的语法很相似。网上有这样一个问题：What is the difference between D3 and jQuery?

回答：

D3 is data-driven but jQuery is not: with jQuery you directly manipulate elements, but with D3 you provide data and callbacks through D3’s unique data(), enter() and exit() methods and D3 manipulates elements.
D3 is usually used for data visualization but jQuery is used for creating web apps. D3 has many data visualization extensions and jQuery has many web app plugins.
Both are JavaScript DOM manipulation libraries, have CSS selectors and fluent API and are based on web standards which makes them look similar.

粗译：

D3 是数据驱动的，而 jQuery 不是。jQuery 只是操作元素，D3 不仅可以操作元素，还可以使用其特有的 data(), enter() and exit() 方法提供数据和回调。
D3 应用于数据可视化，jQuery 应用于网页开发。D3 有很多数据可视化扩展插件，而 jQuery 有很多 web app 插件。
两者都是 DOM 操作类 JS 库，都拥有 CSS 样式选择器和流畅的 API 且建立在 web 标准上，故而有些相似。

1. 这里先提示一个小的 error，也许将来你在开发中也会遇到：

c-error.png

-- Error: Access to XHTMLHttpRequest at 'file/...' from origin 'null' has been blocked by CORS policy. ......

这个问题的出现是因为使用 file 协议打开，而 Chrome 不支持这样访问。

解决方案：本地部署 web

安装 http-server

npm i http-server -g

cd 到 index.html 文件的目录下，然后执行命令：

http-server

启动成功会显示如下界面

terminal.png

打开 localhost:8080，可以正常显示了

2. select(), append(), text() 的使用

新建 HTML 文件，引入 d3 库：

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

给个 p 标签

<p>
  This is a test
</p>

然后我们来使用 d3 的 select(), append(), text() 方法:

// 改变 p 元素的文本
d3.select('p').text('test a is this');

// 选中 body 元素追加一个 p 标签并添加文本
d3
  .select('body')
  .append('p')
  .text('this is the second one');

页面显示：

test a is this

this is the second one

3. 画布和常见几何图形

D3 的坐标轴是这样的，坐标轴原点在左上角

d3axes.png

// 新建画布，添加宽度高度，但是画布在网页中是透明的，只有检查元素时可以看到它的大小区域
// 使用 SVG 来作图
var canvas = d3
  .select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);

// 画圆
var circle = canvas
  .append('circle')
  .attr('cx', 250)
  .attr('cy', 250)
  .attr('r', 50)
  .attr('fill', 'blue');

var circle = canvas
  .append('circle')
  .attr('cx', 250) // 圆心在 X 轴的坐标
  .attr('cy', 250) // 圆心在 Y 轴的坐标
  .attr('r', 5) // 半径
  .attr('fill', '#fff'); // 填充色，如果不写，默认黑色

// 矩形
var rect = canvas
  .append('rect')
  .attr('width', 70)
  .attr('height', 50)
  .attr('fill', 'pink');

// 线，以两个端点固定线的位置，分别是 x1, x2, y1, y2
var line = canvas
  .append('line')
  .attr('x1', 49)
  .attr('y1', 49)
  .attr('x2', 250)
  .attr('y2', 250)
  .attr('stroke', 'green') // 颜色
  .attr('stroke-width', 5); // 粗细

额，画了个啥？

three.png

4. 如何进阶学习

Github 有中文 API 文档，这里只贴出目录供参考，详细信息请查看 API 文档。

Arrays (静态, 查询, 变换计算, 直方图)
Axes 基于比例尺提供人类友好的标尺刻度
Brushes 使用鼠标或触摸选择一维或二维区域
Chords 和弦图
Collections (Objects, Maps, Sets, Nests -- 根据指定的规则将数组重组为层次结构)
Colors 颜色空间以及转换
Color Schemes 用于定量，序数和分类比例尺的颜色渐变和调色板
Contours
Dispatches 使用命名回调函数分离关注点
Dragging 使用鼠标或触摸输入拖放 SVG, HTML 或者 Canvas
Delimiter-Separated Values 解析和格式化以分隔符隔开的特定格式文件或字符串，大多数情况下指 CSV 和 TSV
Easings 平滑过渡的过渡函数
Fetches 基于 Fetch API 的更为便捷的获取数据方法
Forces 使用速度 Verlet 积分的力模型仿真布局
Number Formats 对人类友好的数值格式化
Geographies 地理投影, 形状以及数学计算(Paths, Projections, Spherical Math, Spherical Shapes, Streams, Transforms)
Hierarchies 对层次数据进行可视化的一些布局算法
Interpolators 对数值、颜色、字符串、数组、对象等进行插值
Paths 将 Canvas 路径命令序列化为 SVG 路径字符串
Polygons 二维多边形的几何操作
Quadtrees 四叉树, 二维空间递归细分
Random Numbers 基于多种多样的分布模型生成随机数
Scales 将抽象数据映射到可视化表示的编码(Continuous, Sequential, Quantize, Ordinal)
Selections 通过选择元素和绑定数据对 DOM 元素进行修改或变换(Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
Shapes 可视化基本图元(Arcs 圆形或环形, Pies 饼图或者环形图, Lines 曲线或折线, Areas 面积图, Curves 曲线, Links 圆滑三次 Bézier 曲线, Symbols 分类形状编码, Stacks 堆叠图)
Time Formats 受 strptime 和 strftime 启发，时间类型的解析个格式化
Time Intervals 按照人类对日期的计算方式实现的日期计算
Timers 一个高效的可以用来管理上千并发动画的队列
Transitions 对 selections 进行动画过渡
Voronoi Diagrams 根据指定的一组点集计算其泰森多边形
Zooming 使用触摸鼠标或者触摸面板缩放 SVG, HTML 或者 Canvas

看到这个目录确实有点头痛，更何况每个模块又有分项列表，很多方法。我个人的学习路径是:

略读一遍所有方法名称及其用途
将所有模块按照自己的理解进行分类，因为方法狠多，全部理解并记住不可行亦无必要。将模块再次分类后，做到对 D3 的操作有印象，需要用到的时候知道那个类有哪个方法，再去查阅 API 文档进行开发。
定好目标，不需要太难，自己动手做一个 demo 练习下，这个过程很重要，可以锻炼查阅 API 文档的能力

这里附上我的分类，仅供参考：

分类	模块
⭐️ 计算类	Arrays, Collections, Hierarchies, Polygons, Quadtrees, Random Numbers,
⭐️ 数据处理类	Dispatches, Delimiter-Separated Values, Fetch, Number Formates, Interpolators, Paths
⭐️ 时间处理类	Time Formates, Time Intervals, Timers
⭐️ DOM 操作类	Selections
⭐️ 动画类	Easings, Transitions
👑 颜色类	Color, Color Schemes,
👑 鼠标控制	Brushes, Dragging, Zooming
👑 地理类	Geographies
👑 比例调整类	Axes, Scales,
👑 图形类	Shapes, Voronoi Diagrams, Contours, Forces, Chords

前五项 ⭐️ 分类是属于基础模块，也是平时编程会常用（至少有一部分会常用到）的方法，比如 Arrays, Collections, Fetch... Selection 对应 jQuery, 动画类对应 CSS3. 差不多减少了一半学习量。
后面五个 👑 分类是需要额外学习的了，其中鼠标控制类最简单，图形类最难。

5. 官方画廊

点开官方画廊的示例，发现下面的代码根本看不懂

原来 Observable 是一个在线开发编辑 D3 的工具，它的语法同我们平时开发是有些差异的。快速了解 Observable -- 『干货|d3创始人又一力作：不仅能在线写D3.js，还能让你写的更出色』。

另附 Observable: The User Manual 用户使用手册

下一篇文章我会介绍 Observable 使用入门