D3.js 数据可视化 JS 库快速入门 + Observabl

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. ......

这个问题的出现是因为直接从浏览器, 而 Chrome 不允许这样访问。

解决方案：本地部署 web

• 安装 http-server

npm i http-server -g

• cd 到需要允许 index.html 文件的目录，然后执行命令：

http-server

启动成功会显示如下界面

terminal.png

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

  
  result.png

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

• 前五项 ⭐️ 分类是属于基础模块，也是平时使用 JS 编程会常用（至少有一部分会常用到）的方法，比如 Arrays, Collections, Fetch... Selection 对应 jQuery, 动画类对应 CSS3. Wow, 减少了一半学习量呢。

• 后面五个 👑 分类是需要额外学习的了，其中鼠标控制类最简单，图形类最难。

5. 官方画廊

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

Screen Shot 2019-06-06 at 10.06.12 AM.png

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

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