d3js

录入时间: 2019-08-29 02:33:27

地址: https://d3js.org/ 点击前往

D3 的全称是(Data-Driven Documents)是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。

API中文手册

司机大傻编辑本页 on 18 Oct 2016 · 77修订版

D3库中所有函数都在“d3”命名空间内。

D3使用语义版命名。你可以使用“d3.version”查看D3的最新版本

D3 API总览

  • 核心 - 包括选择器,过渡,数据处理,本地化,颜色等。
  • 地理 - 球面坐标,经纬度运算。
  • 几何 - 提供绘制2D几何图形的实用工具。
  • 布局 - 推导定位元素的辅助数据。
  • 比例尺 - 数据编码和视觉编码之间的转换。
  • 可缩放矢量图形 - 提供用于创建可伸缩矢量图形的实用工具。
  • 时间 - 解析或格式化时间,计算日历的时间间隔等。
  • 行为 - 可重用交互行为

d3(核心函数)

选择

过渡

数组

数学

请求

  • d3.csv - 请求一个CSV(逗号分隔值)的文件。
  • d3.html - 请求一个HTML文档片段。
  • d3.json - 请求一个JSON对象。
  • d3.text - 请求一个文本文件。
  • d3.tsv - 请求一个TSV(制表符分隔值)的文件。
  • d3.xhr - 使用XMLHttpRequest请求一个资源。
  • d3.xml - 请求一个XML文档片段。
  • xhr.abort - 终止未完成的请求。
  • xhr.get - 发送一个GET请求。
  • xhr.header - 设置一个请求头。
  • xhr.mimeType - 设置一个接受请求头并覆盖响应的MIME类型。
  • xhr.on - 为“progress”,“load”或“error”事件添加一个事件监听器。
  • xhr.post - 发送一个POST请求。
  • xhr.response - 设置一个响应映射函数。
  • xhr.send - 使用指定的数据和函数发送一个请求。

格式化

CSV format(d3.csv)

本地化

颜色

  • d3.hcl - 指定一种颜色,创建一个HCL颜色对象。
  • d3.hsl - 指定一种颜色,创建一个HSL颜色对象。
  • d3.lab - 指定一种颜色,创建一个L * a * b *颜色对象。
  • d3.rgb - 指定一种颜色,创建一个RGB颜色对象。
  • hcl.brighter - 增强颜色的亮度,由参数决定。
  • hcl.darker - 减弱颜色的亮度,变化幅度由参数决定。
  • hcl.rgb - 将HCL颜色对象转化成RGB颜色对象。
  • hcl.toString - HCL颜色对象转化为字符串格式。
  • hsl.brighter - 增强颜色的亮度,变化幅度由参数决定。
  • hsl.darker - 减弱颜色的亮度,变化幅度由参数决定。
  • hsl.rgb - 将HSL颜色对象转化成RGB颜色对象。
  • hsl.toString - 将HSL颜色对象转化为字符串格式。
  • lab.brighter - 增强颜色的亮度,由参数决定。
  • lab.darker - 减弱颜色的亮度,变化幅度由参数决定。
  • lab.rgb - 将L * a * b *颜色对象转化成RGB颜色对象。
  • lab.toString - 将L * a * b *颜色对象转化为字符串格式。
  • rgb.brighter - 增强颜色的亮度,由参数决定。
  • rgb.darker - 减弱颜色的亮度,变化幅度由参数决定。
  • rgb.hsl - 将RGB颜色对象转化成HSL颜色对象。
  • rgb.toString - 将RGB颜色对象转化为字符串格式。

命名空间

  • d3.ns.prefix - 访问或扩展已知的XML命名空间。
  • d3.ns.qualify - 限定一个前缀名称,例如“xlink:href”。

内部

  • d3.dispatch - 创建一个定制的事件分发器。
  • d3.functor - 创建一个函数并返回一个常量。
  • d3.rebind - 重新绑定get / set方法到一个子类。
  • dispatch.on - 注册或者解除注册事件监听器。
  • dispatch.type - 为指定的监听器分发事件。

比例尺

数值比例尺

序数比例尺

SVG函数

形状

刷子

  • brush.clear - 重置拖选范围。
  • brush.empty - 拖选是否为空。
  • brush.event - 在设置范围之后分发拖选事件。
  • brush.extent - 拖选范围可以是0,1,2维的。
  • brush.on - 监听拖选何时改变。
  • brush.x - 拖选的x - 比例,用于水平拖选。
  • brush.y - 拖选的y - 比例,用于垂直拖选。
  • brush - 将拖选应用在指定的选择器和过渡上。
  • d3.svg.brush - 点击和拖曳来选择1维或2维区域。

d3.time(时间)

时间格式化

时间比例尺

时间间隔

d3.layout(布局)

捆布局

  • bundle - 对边使用Holten 层次捆绑算法。
  • d3.layout.bundle - 构造一个新的默认的捆绑布局。

弦布局

簇布局

力布局

层次布局

直方图布局

包布局

  • d3.layout.pack - 用递归的圆 - 包生成一个层次布局。
  • pack.children - 取得或设置子节点的访问器。
  • pack.links - 计算树节点中的父子链接。
  • pack.nodes - 计算包布局并返回节点数组。
  • packinpadding - 指定布局间距(以像素为单位)
  • pack.radius - 指定节点半径(不是由值派生来的)
  • pack.size - 指定布局尺寸。
  • pack.sort - 控制兄弟节点的遍历顺序。
  • pack.value - 取得或设置用于圆尺寸的值访问器。
  • pack -pack.nodes的别名。

分区布局

饼布局

  • d3.layout.pie - 构造一个新的默认的饼布局。
  • pie.endAngle - 取得或设置饼布局整体的结束角度。
  • pie.padAngle - 取得或设置饼布局填充角度。
  • pie.sort - 控制饼片的顺时针方向的顺序。
  • pie.startAngle - 取得或设置饼布局整体的开始角度。
  • pie.value - 取得或设置值访问器函数。
  • pie - 计算饼图或圆环图中弧的开始和结束角度。

堆叠布局

  • d3.layout.stack - 构造一个新的默认的堆叠布局。
  • stack.offset - 指定整体的基线算法。
  • stack.order - 控制每个系列的顺序。
  • stack.out - 取得或设置用于存储基线的输出函数。
  • stack.values - 取得或设置每个系列的值访问器函数。
  • stack.x - 取得或设置x - 维访问器函数。
  • stack.y - 取得或设置y - 维访问器函数。
  • stack - 计算堆叠图或者面积图的基线。

树布局

矩形树布局

d3.geo(地理)

地理路径

地理投影

d3.geom(几何)

泰森多边形

四叉树

多边形

凸包

  • d3.geom.hull - 使用默认访问器
  • hull - 为给定的点数组计算凸包。
  • hull.x - 获取或设置x - 坐标访问器。
  • hull.y - 取得或设置y - 坐标访问器。

d3.behavior(行为)

拖动

缩放


本文参与人员组织时间
翻译大傻VisualCrew小组20150801
校对/排版大傻VisualCrew小组20160331
 WeiFei365VisualCrew小组2015-12-01 15:12:24
 liang42haoVisualCrew小组2016-01-11 19:27:12