D3.js 之 d3-shap 简介

Question

假设你现在想创建一个用于学习特定数据集的工具，你最容易想到的呈现方式是什么呢? 一个可以自定义的 chart? 一个抽象的坐标系统? 将数据编码成图像来表示?

每一种方法都有它的好处. 比如你想做探索性的数据可视化，你可能会更偏向于快速（高效) 的方法，因为这样你可以快速的测试各种不同的可视化效果。
如果是做讲解性质的数据可视化，你可能会选择能精细控制的方法，以让你的观众能精准的理解你的意图。

不管你选择的哪种方法，你最终都需要将实际的图形画在屏幕上，也就是说你需要用你的数据生成一些能代表这些数据的图形。

那么，你打算如何画出图形呢?

一些简单的图形，比如柱状图，通过 canvas 的 api 就可以轻松的画出: fillRect

如果要画出一些直线，或者折线也不难，使用 canvas 的 moveTo , lineTo 方法即可:

但若是想画出曲线图呢? 想要画出 圆滑的曲线 似乎开始变得不那么容易了:

我们再增加一点难度，如果我们想要曲线圆滑的同时，还要保持数据的 单调性 呢?

再者，如果我们想画出扇形切片呢? 如果我们还想给扇形切片加上圆角，加上切片之间的间距呢,

怎么样，是不是觉得有些 挑战 了呢?

这时候该 d3-shape 出场了:
d3-shape 是一个用于绘制数据可视化中常见的几何图形的库. 它非常的小巧，而且可以同时和 SVG 和 Canvas 协同工作。

d3-shape 有多小?

大概 28kb, 压缩后仅仅 6kb. 它还包括了 d3-path . 它总共代码仅仅 1500 行，所以我非常推荐你看看它的 源代码 .

使用 d3-shape 你将得到什么呢?

简单的说，你将得到绘制 线 和 面 的能力. 包括: 各种各样的曲线，派图，扇形图，散点图等等。

除此之外还有更多, d3-hierarchy 模块包括了绘制包含层级结构数据的功能（比如树状图). 还有更多独立的模块能够帮助你绘制出更多定制化的图形: 比如 绘制地理位置的图像，绘制模拟物理系统的网络图等等。

d3-shape 的目的是什么呢?

d3-shape 是一个让你进行数据可视化的工具. 它特别适合和已有的操作 DOM 的框架一同使用（意味着不需要 d3-selection), 比如 Angular, Vue, React. d3-js 中还有许多方便的模块，配合着使用能更好的提升你的数据可视化效率，比如: d3-color , d3-format , d3-time and d3-scale .

想要贡献代码?

想要自己实现一个曲线生成的算法? 想要创建一种消除数据噪点的曲线? 查看源代码，在 github 上提交 pull request. 或者查看编写 d3 插件的文章，创建并发布你自己的 d3 插件 模块。

祝你 d3-shape 使用愉快。

原文: 来自 D3.js 作者 Mike Bostock 的 Introducing d3-shape