阅读 282

D3 - 形状与绘制

数据可视化,我们要做的就是把数据集用合适形状的图像表现出来。

web 端绘图

在 web 端,我们大概有四种绘图途径

  • 基础 DOM 元素

image.png 📦codepen

  • Canvas 利用 <canvas> 画布元素,我们可以在上面绘制珊格图。它在做密集型绘图时有很大的优势,因为它只需要一个 DOM 元素的开销。Echarts 常规使用 canvas 绘图。

  • WebGL 在 canvas 画布上还可以利用 webGL 技术制图,它调用计算机底层的着色技术,而且可以得到计算机 GPU 的加持,因此速度会非常快。只是兼容性比较差。

  • SVG 我们可以像使用基础 DOM 元素那样使用 系列的标签,svg 一般专门用来制作矢量图的。


D3 很擅长操作 svg。

用 svg 的 circlerect 画出像圆圈和矩形这样简单规则的形状。 d3-shape 提供了很多形状函数,帮助开发者创建复杂的形状。

d3-shape 形状

  • arc 弧

    弧形常见于扇形图,饼图,环形图。表盘、弧形进度条也是它的变体,来个 demo 感受一下,结合上节所学的 selection。

    image.png 📦codepen

  • pie 🍕 饼图

    了解了 d3.arc 之后,d3.pie 的原理自然就很简单了。pie 函数能根据传入的数组中的数值,帮我们计算好它对应的弧属性值,然后你就可以传给 d3.arc,来绘制一个饼图了。

    image.png 📦codepen

  • lines 折线图,一系列分布在二维坐标系上的点的连线,线是直线。

  • curves 曲线图,曲线图是基于折线图,通过 line.curve() 指定变曲线的方法,默认的折线是 curveLinear

    image.png

    📦codepen

    你要是愿意,你也可以根据 d3-shape 提供的 曲线接口 去定义自己的曲线方法。

  • links 连线, 点与点的连线形式,d3-shape 中提供的连线方法有 vertical, horizontal, 和 radial

  • symbols 标识,一些常见的形状 image.png 📦codepen

    d3-shape 也提供了 自定义标识 的接口方法。另外,推荐使用 svguse 标签。

  • stacks: d3-shape 还提供了 stack api。 它不直接绘制任何图形,它的作用是处理堆叠图形,帮我们计算各个图形的位置,在堆叠柱形图和水流图中,需要用到它。

d3-shapeD3 处理数据可视化最基础也是最核心的一个模块,这里只是介绍了它一点点的用法,可查看官方文档学习详细用法 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 应该就这些了,不过这只是刚刚开始。

D3 - API 概览

D3 - 获取数据

D3 - 处理数据

D3 - 操作DOM

D3 - 形状与绘制

D3 - 色彩配置

D3 - 处理时间

D3 - 地图与地球

D3 - 动画

D3 - 图形互动

文章分类
前端