Theme
Tags
Series
D3 Chart Example 这个系列的文章主要是学习 D3 在 Observable 中的官方样例,逐行 line-by-line 解读样例代码。
插值器是用于计算过渡值的,以便实现补间动画。
空间数据是指用来表示空间实体的位置、几何特征、属性特征的数据。
使用标签 <canvas> 在页面创建一个 canvas 画布,一个 2D 平面,并渲染出指定的画面,如形状、图像、文字、图案等。
可缩放矢量图形 Scalable Vector Graphics,SVG 是一个由万维网联盟 W3C 自 1999 年开始开发的基于文本的开放标准,是一种基于 XML 的标记语言,用于描述二维的矢量图形,它能渲染三种类型的图形对象:矢量图形、位图、文本,并和 CSS、DOM、JavaScript 等其他网络标准无缝衔接。
关系型数据可以分为两种结构
有多种方式进行多色配色,如类似色、邻近色、对比色、互补色,基于数据可视化的目的和需求不同可以采用不同的配色方案。
D3.js 全称为 Data-Driven Documents 是一个基于数据来操作 DOM 的 JS 库。
可视化或分析数据通常由一个数组来表示,JavaScript 原生支持多种数组操作方法
坐标轴组件 Axis 可以基于比例尺 scales 生成人类友好型的刻度标尺。
d3-delaunay 模块用于对点集进行三角剖分,并生成维诺图
d3-dispatch 模块用于为自定义事件创建监听器,然后分发自定义事件以触发预设的响应函数,以实现事件驱动的交互
Fetch 模块基于 fetch 方法添加了解析功能,内部支持 JSON、CSV、TSV 格式的数据获取与解析,也可以直接对文本使用其他形式的解析。
d3-hierarchy 模块用于处理和可视化树形结构的数据
D3 提供了基本图元模块 d3-path 用于将画布 Canvas 绘制路径的方法序列化 serialize,转换为适用于 SVG 作为路径元素 path 的属性 d 的字符串。
d3-polygon 模块与二维多边形相关,提供了一些方法以获取与多边形相关的基本几何特性,例如求面积、周长等
尺度 Scale 是一个将抽象的数据映射为可视化表示的工具。
Selection 通过选择元素并绑定数据,以实现强大的基于数据驱动 DOM 的操作。
可视化通常由离散图形标记组成,如 symbols、arcs、lines 和 areas,虽然条形的矩形、圆形等规则图形可以很容易的使用 SVG 或者 Canvas 来生成,但是其他的形状,如扇形以及向心曲线就很复杂,因此 D3 提供了基本图元模块 d3-shape,其中内置了许多图形生成器以便使用。
该模块用于管理大量的动画(支持并发动画或分阶段动画),保证它们之间的时序一致同步
D3 是由相互协同工作的模块集合构成的,在使用 D3 时可以单独使用其中某些模块(只导入指定模块),也可以使用默认构建的全部功能。