数据可视化，我们要做的就是把数据集用合适形状的图像表现出来。
web 端绘图
在 web 端，我们大概有四种绘图途径
- 基础 DOM 元素
-
Canvas 利用
<canvas>画布元素，我们可以在上面绘制珊格图。它在做密集型绘图时有很大的优势，因为它只需要一个 DOM 元素的开销。Echarts常规使用 canvas 绘图。 -
WebGL 在 canvas 画布上还可以利用 webGL 技术制图，它调用计算机底层的着色技术，而且可以得到计算机 GPU 的加持，因此速度会非常快。只是兼容性比较差。
-
SVG 我们可以像使用基础 DOM 元素那样使用 系列的标签，svg 一般专门用来制作矢量图的。
D3 很擅长操作 svg。
用 svg 的
circle和rect画出像圆圈和矩形这样简单规则的形状。 d3-shape 提供了很多形状函数，帮助开发者创建复杂的形状。
d3-shape 形状
-
arc 弧
弧形常见于扇形图，饼图，环形图。表盘、弧形进度条也是它的变体，来个 demo 感受一下,结合上节所学的 selection。
-
pie 🍕 饼图
了解了
d3.arc之后，d3.pie的原理自然就很简单了。pie 函数能根据传入的数组中的数值，帮我们计算好它对应的弧属性值，然后你就可以传给d3.arc，来绘制一个饼图了。 -
lines 折线图，一系列分布在二维坐标系上的点的连线，线是直线。
-
curves 曲线图，曲线图是基于折线图，通过
line.curve()指定变曲线的方法，默认的折线是curveLinear。你要是愿意，你也可以根据
d3-shape提供的 曲线接口 去定义自己的曲线方法。 -
links 连线， 点与点的连线形式，
d3-shape中提供的连线方法有 vertical, horizontal, 和 radial。 -
symbols 标识，一些常见的形状
📦codepen
-
stacks：
d3-shape还提供了 stack api。 它不直接绘制任何图形，它的作用是处理堆叠图形，帮我们计算各个图形的位置，在堆叠柱形图和水流图中，需要用到它。
d3-shape 是 D3 处理数据可视化最基础也是最核心的一个模块，这里只是介绍了它一点点的用法，可查看官方文档学习详细用法 GitHub - d3/d3-shape
d3-path 路径
D3 模块设计很巧妙，d3-path 它是上述 d3-shape 模块的依赖项。同时它也可以以一个单独的模块使用，
d3-path 旨在通过与 canvas 绘图一样的 api，生成 svg 上的 path。它的使用方式是这样：
import { path } from "https://cdn.skypack.dev/d3-path@3";
const p = path();
p.moveTo(1, 2);
p.lineTo(3, 4);
p.closePath();
总体来说，canvas 性能更高，svg 则更方便。想了解 d3-path 是怎么适配这两种方式，可参考 官方文档 。
d3-polygon 面或多边形
GitHub - d3/d3-polygon: Geometric operations for two-dimensional polygons.
面是一系列点 [x, y] 构成的图形。
挖个坑，以后填 D3 - 地图与地球
小结
至此 d3 形状和绘制的一些基本 api 应该就这些了，不过这只是刚刚开始。
