D3 API Reference

D3 是一个相互协同工作的 模块集合; 你可以单独使用其中某些模块也可以使用默认构建的全部功能。每个模块的源码和文档都在对应的仓库中获取到。可以通过下面的链接获取更多信息。d3 v3.x 和 4.x 之间的差异可以参考 CHANGES; 3.x 的文档可以参考 这里

D3 使用 语义化版本. 当前的版本号通过 d3.version 暴露.

Arrays (d3-array)

数组操作,包括排序、查找、汇总等等

Statistics

基本的静态统计计算方法

  • d3.min - 计算数组中的最小值.
  • d3.max - 计算数组中的最大值.
  • d3.extent - 计算数组中的最大值和最小值.
  • d3.sum - 计算数组元素之和.
  • d3.mean - 计算数组元素的算术中位数.
  • d3.median - 计算数组元素的中位数 (也就是 0.5-分位数).
  • d3.quantile - 计算有序数组的分位数.
  • d3.variance - 计算数组元素的方差.
  • d3.deviation - 计算数组元素的标准差.

Search

查找类方法

  • d3.scan - 使用指定的比较器进行线性查找指定的元素.
  • d3.bisect - 二分查找有序数组中指定元素的索引.
  • d3.bisectRight - 二分查找有序数组中指定元素的索引.
  • d3.bisectLeft - 二分查找有序数组中指定元素的索引.
  • d3.bisector - 用指定的访问器或比较器对二分查找.
  • bisector.left - 与 bisectLeft 类似, 可以指定比较器.
  • bisector.right - 与 bisectRight 类似, 可以指定比较器.
  • d3.ascending - 计算两个值的自然顺序.
  • d3.descending - 计算两个值的自然顺序.

Transformations

数组变换和计算,返回新的数组

  • d3.cross - 计算两个数组的笛卡尔积.
  • d3.merge - 将多个数组合并为一个.
  • d3.pairs - 将数组中相邻的两个元素两两结合.
  • d3.permute - 根据指定的索引返回对数组重排后的结果.
  • d3.shuffle - 随机打乱数组顺序
  • d3.ticks - 从给定的区间范围内生成一系列值.
  • d3.tickIncrement - 从给定的区间范围内生成一系列值.
  • d3.tickStep - 从给定的区间范围内生成一系列值.
  • d3.range - 根据指定的区间生成一系列值.
  • d3.transpose - 将数组的数组进行转置.
  • d3.zip - 转置多个数组.

Histograms

直方图将离散样本分成连续的,不重叠的区间

Axes (d3-axis)

基于比例尺提供人类友好的标尺刻度

Brushes (d3-brush)

使用鼠标或触摸选择一维或二维区域

Chords (d3-chord)

Collections (d3-collection)

一组方便的数据结构。

Objects

将关联数组(对象)转为数组的一组方法

  • d3.keys - 关联数组中所有的键
  • d3.values - 关联数组中所有的值
  • d3.entries - 将关联数组转为 key-value 形式的对象数组

Maps

ES6Map 类似,但是有些不同

  • d3.map - 创建一个新的空的 map 映射.
  • map.has - 当 map 映射中有给定的 key 时返回 true
  • map.get - 根据指定的 key 返回对应的值
  • map.set - 设置指定的 key 对应的值为指定的值
  • map.remove - 移除指定的 key 以及值
  • map.clear - 清空 map 映射中所有的项
  • map.keys - 以数组的形式获取 map 映射中的 key
  • map.values - 以数组的形式获取 map 映射中的 value
  • map.entries - 以数组的形式获取 map 映射中的 key-values 对象
  • map.each - 遍历每一项并执行指定的方法.
  • map.empty - 判断 map 映射是否为空
  • map.size - 计算 map 映射中项的数目

Sets

ES6Set 类似,但是有些不同

  • d3.set - 创建一个新的空的集合
  • set.has - 判断集合中是否包含给定的值
  • set.add - 将指定的值添加到集合中
  • set.remove - 移除集合中指定的值
  • set.clear - 清空集合中所有的值
  • set.values - 以数组的形式获取集合中的所有值
  • set.each - 为集合中每一个值执行指定的函数
  • set.empty - 判断集合是否为空
  • set.size - 获取集合中项的多少

Nests

根据指定的规则将数组重组为层次结构

  • d3.nest - 创建一个新的嵌套对象.
  • nest.key - 为嵌套操作添加一个 key 作为分层依据
  • nest.sortKeys - 根据 key 对当前层次的进行排序
  • nest.sortValues - 根据 value 对当叶节点进行排序
  • nest.rollup - 为叶节点指定一个 rollup (归纳)函数
  • nest.map - 生成嵌套结果,并返回一个 map 映射
  • nest.object - 生成嵌套结果并返回一个关联数组
  • nest.entries - 生成嵌套结果,并返回一组 key-value 元组

Colors (d3-color)

颜色空间以及转换

  • d3.color - 转换指定的 CSS 颜色字符串.
  • color.rgb - 计算当前颜色值的 RGB 表示.
  • color.brighter - 创建一个更亮的颜色副本.
  • color.darker - 创建一个更暗的颜色副本
  • color.displayable - 判断当前设备是否支持当前颜色
  • color.hex - 返回十六进制的 RGB 字符串标识当前的颜色.
  • color.toString - 将当前颜色转为 RGB 颜色的十六进制表示
  • d3.rgb - 创建一个新的 RGB 颜色.
  • d3.hsl - 创建一个新的 HSL 颜色.
  • d3.lab - 创建一个新的 Lab 颜色.
  • d3.hcl - 创建一个新的 HCL 颜色.
  • d3.lch - 创建一个新的 HCL 颜色.
  • d3.gray - 创建一个新的 Lab 灰色( a = b = 0).
  • d3.cubehelix - 创建一个新的 Cubehelix 颜色.

Color Schemes (d3-scale-chromatic)

用于定量,序数和分类比例尺的颜色渐变和调色板。

Categorical

Diverging

Sequential (Single Hue)

Sequential (Multi-Hue)

Cyclical

Contours (d3-contour)

Compute contour polygons using marching squares.

Dispatches (d3-dispatch)

使用命名回调函数分离关注点

Dragging (d3-drag)

使用鼠标或触摸输入拖放 SVG, HTML 或者 Canvas

Delimiter-Separated Values (d3-dsv)

解析和格式化以分隔符隔开的特定格式文件或字符串,大多数情况下指 CSVTSV.

Easings (d3-ease)

平滑过渡的过渡函数.

Fetches (d3-fetch)

基于 Fetch API 的更为便捷的获取数据方法.

  • d3.blob - 以 blob 的形式获取文件.
  • d3.buffer - 以 array buffer 的形式获取文件.
  • d3.csv - 获取逗号分隔符 (CSV) 文件.
  • d3.dsv - 获取分隔符 (DSV) 文件.
  • d3.image - 获取图片.
  • d3.json - 获取 JSON 文件.
  • d3.text - 获取无格式文本.
  • d3.tsv - 获取 tab 分隔符 (TSV) 文件.

Forces (d3-force)

使用速度 Verlet 积分的力模型仿真布局.

Number Formats (d3-format)

对人类友好的数值格式化.

Geographies (d3-geo)

地理投影, 形状以及数学计算.

Paths

Projections

Spherical Math

Spherical Shapes

Streams

Transforms

Hierarchies (d3-hierarchy)

对层次数据进行可视化的一些布局算法.

Interpolators (d3-interpolate)

对数值、颜色、字符串、数组、对象等进行插值

Paths (d3-path)

Canvas 路径命令序列化为 SVG 路径字符串。

Polygons (d3-polygon)

二维多边形的几何操作.

Quadtrees (d3-quadtree)

四叉树, 二维空间递归细分.

Random Numbers (d3-random)

基于多种多样的分布模型生成随机数.

Scales (d3-scale)

将抽象数据映射到可视化表示的编码.

Continuous Scales

将一个连续的,定量的输入映射到连续的输出区间.

Sequential Scales

将连续的定量的输入映射到连续的固定的插值器.

Diverging Scales

将连续的,定量的输入映射到连续的固定的插值器

Quantize Scales

将连续的输入域映射到离散的输出域.

Ordinal Scales

将离散的输入域映射到离散的输出域.

Selections (d3-selection)

通过选择元素和绑定数据对 DOM 元素进行修改或变换.

Selecting Elements

Modifying Elements

Joining Data

  • selection.data - 将元素与数据绑定.
  • selection.enter - 获取需要插入的选择集(数据个数大于元素个数)的占位符.
  • selection.exit - 获取多余的元素的选择集(数据个数小于元素个数).
  • selection.datum - 设置或获取元素绑定的数据集(不进行数据与元素个数的对比).

Handling Events

Control Flow

Local Variables

Namespaces

Shapes (d3-shape)

可视化基本图元

Arcs

圆形或环形,在饼图或者环形图中用到

Pies

将一组表格数据转换成生成饼图或者环形图需要的数据

Lines

曲线或折线,在折线图中使用.

Areas

由基线和顶线围成的一块区域,在面积图中使用.

Curves

在一系列点之间进行插值,形成一条连续的线.

Links

源点到目标点之间的圆滑三次 Bézier 曲线.

Symbols

分类形状编码,应用于散点图等场景中.

Stacks

堆叠图,堆叠面积、堆叠柱状图等.

Time Formats (d3-time-format)

来自 strptimestrftime 的灵感,时间类型的解析个格式化。

Time Intervals (d3-time)

按照人类对日期的计算方式实现的日期计算.

Timers (d3-timer)

一个高效的可以用来管理上千并发动画的队列

Transitions (d3-transition)

selections 进行动画过渡.

Voronoi Diagrams (d3-voronoi)

根据指定的一组点集计算其泰森多边形.

  • d3.voronoi - 创建一个新的泰森多边形生成器.
  • voronoi - 根据指定的一组点生成新的泰森多边形计算结果.
  • voronoi.polygons - 根据指定的一组点生成泰森多边形中多边形集合.
  • voronoi.triangles - 根据指定的一组点计算其德劳内三角剖分结果集合.
  • voronoi.links - 计算指定一组点集的三角剖分结果以边的形式返回.
  • voronoi.x - 设置 x 访问器.
  • voronoi.y - 设置 y 访问器.
  • voronoi.extent - 设置点集合的可观测边界.
  • voronoi.size - 设置点集合的可观测边界.
  • diagram.polygons - 返回指定泰森多边形的多边形数组.
  • diagram.triangles - 返回指定泰森多边形的三角形数组.
  • diagram.links - 返回指定泰森多边形的边数组.
  • diagram.find - 找到当前泰森多边形划分中距离目标点指定半径范围内最近的点.

Zooming (d3-zoom)

使用触摸鼠标或者触摸面板缩放 SVG, HTML 或者 Canvas.