[svg] d3.js (3)

选择

d3.select - 从当前文档中选择一个元素。
d3.selectAll - 从当前文档中选择多个元素。
d3.event - 访问用于交互的当前用户事件。

selection.text - 取得或设置文本内容。
selection.style - 取得或设置样式属性。
selection.data - 在计算相关的连接时，取得或设置一组元素的数据。
selection.append - 创建并追加一个新元素。
selection.remove - 从当前文档中移除当前元素。
selection.attr - 取得或设置属性的值。
selection.call - 为当前选择调用一个函数。
selection.transition - 在选中元素上开启过渡。
selection.enter - 为缺失的元素返回占位符。（ 绑定数据数量 > 对应元素 ）
selection.exit - 返回不再需要的元素。（ 绑定数据数量 < 对应元素 ）
selection.on - 为交互添加或移除事件监听器。
selection.each - 为每个选中的元素调用一个函数。

比例尺

d3.scale.linear - 构建一个线性比例尺。
linear.domain - 取得或设置比例尺的定义域。
linear.range - 取得或设置比例尺的输出范围。

d3.scale.ordinal - 构造一个序数比例尺。
ordinal.rangeBand - 获取区间段的宽度。
ordinal.rangeRoundBands - 指定输出范围为连续区间，区间段的起点均为整数。

d3.scale.category10 - 构造一个有10种颜色的序数比例尺。
d3.scale.category20 - 构造一个有20种颜色的序数比例尺。

数组

d3.max - 找出一个数组中的最大值。
d3.min - 找出一个数组中的最小值。
d3.descending - 为排序比较两个值。
map.forEach - 为每个指定的实体调用一个函数。
d3.random.normal - 生成具有正态分布规律的随机数。
d3.random.normal 生成一个函数，这个函数能够按正态（高斯）分布随机生成数值。
要传入两个参数，第一个是位置参数，第二个是尺寸参数。

轴

d3.svg.axis - 创建一个新的轴生成器。
axis - 为给定的选择器或过渡创建或者更新轴。
axis.scale - 设置或者取得比例尺。
axis.orient - 设置或者取得轴的方向。

过渡

d3.transition - 开启一个动画过渡。
transition.duration - 指定每个元素的持续时间（以毫秒为单位）。
transition.delay - 指定每个元素的延迟时间（以毫秒为单位）。
transition.ease - 指定一个过渡的缓动函数。
linear 普通的线性变化
circle 慢慢地到达变换的最终状态
elastic 带有弹跳的到达最终状态
bounce 在最终状态处弹跳几次

可视化图形

d3.layout.histogram - 构造一个新的默认的直方图布局。

histogram.bins - 指定值是如何组织到箱中的。
bins： 分隔数

histogram.frequency - 按频数或者频率计算分布。
frequency： 若值为 true，则统计的是个数；若值为 false，则统计的是概率

histogram.range - 取得或设置值得范围。
range： 区间的范围

d3.layout.pie - 构造一个新的默认的饼布局。
pie.startAngle - 取得或设置饼布局整体的开始角度。
pie.endAngle -取得或设置饼布局整体的结束角度。
pie.value - 取得或设置值访问器函数。

(D3 中的力学图布局是使用韦尔莱积分法计算的，这是一种用于求解牛顿运动方程的数值方法，被广泛应用于分子动力学模拟以及视频游戏中。)
d3.layout.force - 使用物理模拟排放链接节点的位置。
force.nodes - 取得或者设置布局的节点数组。(点)
force.links - 取得或者设置节点间的链接数组。(线)
force.start - 当节点变化时启动或者重启模拟。
force.drag - 给节点绑定拖动行为。
force.on - 监听在计算布局位置时的更新。
force.tick - 运行布局模拟的一步。

force.linkDistance - 取得或者设置链接距离。
指定结点连接线的距离，默认为20。
如果距离是一个常数，那么各连接线的长度总是固定的；
如果是一个函数，那么这个函数是作用于各连接线（ source , target ）的。

force.linkStrength - 取得或者设置链接强度。
指定连接线的坚硬度，值的范围为[ 0 , 1 ]，值越大越坚硬。
其直观感受是：
值为1，则拖动一个顶点A，与之相连的顶点会与A保持linkDistance设定的距离运动
值为0，则拖动一个顶点A，与之相连的顶点不会运动，连接线会被拉长

force.size - 取得或者设置布局大小。
重力的重心位置为 ( x/2 , y/2 )
所有节点的初始位置限定为 [ 0 , x ] 和 [ 0 , y ] 之间（但并非之后也是如此）
如果不指定，默认为 [ 1 , 1 ] 。

force.friction - 取得或者设置摩擦系数。
定义摩擦系数的函数，值的范围为[ 0 , 1 ]，默认为0.9。
但是这个值其实并非物理意义上的摩擦，其实其意义更接近速度随时间产生的损耗，这个损耗是针对每一个顶点的。
值为1，则没有速度的损耗。
值为0，则速度的损耗最大。

force.charge - 取得或者设置电荷强度。
设定引力，是排斥还是吸引，默认值为-30。
值为+，则相互吸引，绝对值越大吸引力越大。
值为-，则相互排斥，绝对值越大排斥力越大。

force.chargeDistance - 取得或者设置最大电荷距离。
设定引力的作用距离，超过这个距离，则没有引力的作用。
默认值为无穷大。

force.gravity - 取得或者设置重力强度。
以 size 函数设定的中心产生重力，各顶点都会向中心运动，默认值为0.1。
也可以设定为0，则没有重力的作用。
force.theta - 取得或者设置电荷作用的精度。
顶点数如果过多，计算的时间就会加大（O(n log n)）。
theta 就是为了限制这个计算而存在的，默认值为0.8。
这个值越小，就能把计算限制得越紧。

force.alpha - 取得或者设置力布局的冷却参数。
设定动画运动的时间，超过时间后运动就会停止。
其实
force.start() 即 alpha(0.1)
force.stop() 即 alpha(0)

d3.layout.chord - 从关系矩阵生成一个弦图。
chord.padding - 取得或设置弦片段间的角填充。
chord.sortSubgroups - 取得或设置用于子分组的比较器。
chord.matrix - 取得或设置布局需要的矩阵数据。
chord.chords - 取回计算的弦角度。
chord.groups - 取回计算的分组角度。

d3.layout.cluster - 将实体聚集成树状图。
cluster.size - 取得或设置布局的尺寸。
cluster.nodes - 计算簇布局并返回节点数组。
cluster.links - 技术树节点之间的父子连接。
cluster.children - 取得或者设置子节点的访问器函数。

d3.layout.tree - 整齐地排列树节点。
tree.separation - 取得或设置相邻节点的间隔函数。

d3.layout.pack - 用递归的圆-包生成一个层次布局。
pack.radius - 指定节点半径（不是由值派生来的）

d3.layout.partition - 递归地将节点树分区为旭日图或者冰柱图。

partition.sort - 控制兄弟节点的遍历顺序。
指定对同深度的节点进行排序的函数。
如果不排序，则按照默认顺序显示。
排序函数与JavaScript 相同：

```
	function comparator(a, b) {  
	  return b.value - a.value;  
	}  
```

partition.size - 指定布局的尺寸。
如果是方形的：size( [ width , height ] )
如果是圆形的：size( [ 2 * Math.PI, radius * radius ] )// radius 为圆的半径

partition.value - 取得或设置用来指定尺寸的值访问器。
设定用哪一个值来表示节点大小。如：
function value(d) { return d.size; }
这样设定的话，用节点里的 size 值来表示节点的大小。

partition.children - 取得或设置孩子访问器。
指定表示子节点的字符串。
默认是：
function children(d) { return d.children; }
表示在 JSON 文件中，子节点的变量符号用 children 表示.

partition.links - 计算树节点中的父子链接。
将上述节点数组传入后，得到连接线的关系，
起点和终点分别存在 source 和 target 变量中。

partition.nodes - 计算分区布局并返回节点数组。
将根数据传入后，得到的节点的数组，每个节点添加8个参数：
parent - 父节点
children - 子节点
value - 表示节点的大小，由下面 value() 函数指定的值，父节点的值等于子节点值的和
depth - 节点的深度
x - 节点的x方向的坐标（不一定指x轴方向，跟据 size() 函数的意义而定）
y - 节点的y方向的坐标（同上）
dx - x方向扩展的宽度（同上）
dy - y方向扩展的宽度（同上）

svg形状

d3.svg.arc - 新建一个弧度生成器。
arc.innerRadius - 获取或设置内半径访问器。
arc.outerRadius - 获取或设置外半径访问器。
arc.centroid - 计算弧中心。

d3.svg.diagonal - 新建一个对角线生成器。
diagonal.projection - 设置或获取一个可选的点转换。

请求

d3.json - 请求一个JSON对象。
d3.csv - 请求一个CSV（逗号分隔值）的文件。
d3.tsv - 请求一个TSV（制表符分隔值）的文件。

CSV格式化

d3.dsv - 为指定的分隔符和mime类型创建一个解析器/格式化器。

地理

GeoJSON

GeoJSON是一种对各种地理数据结构进行编码的格式，
基于Javascript对象表示法的地理空间信息数据交换格式。
GeoJSON对象可以表示几何、特征或者特征集合。
GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。
GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。

除了GeoJSON D3还支持 TopoJSON

d3.geo.path - 创建一个地理路径生成器。
path.centroid - 计算给定要素的投影中心。
d3.geo.mercator - 球形墨卡托投影。
projection - 投影指定的位置。
projection.center - 取得或设置投影的中心位置。
projection.scale - 取得或设置投影的缩放系数。
projection.translate - 取得或设置投影的平移位置。

几何

d3.geom.voronoi - 用默认的访问器创建一个泰森多边形布局。
voronoi.triangles - 计算Delaunay mesh为一个三角形密铺。

行为

d3.behavior.drag - 创建拖动行为。
drag.origin - 设置拖动行为的原点。
drag.on - 监听拖动事件。
dragstart、dragend、drag。

d3.behavior.zoom - 创建缩放行为。
zoom.scaleExtent - 可选参数，比例因子范围。
zoom.scale - 当前的比例因子。
zoom.on - 事件监听器。

data 与 datum 的区别

    datum()：将指定数据赋值给被选择元素。
    data()：将数据数组与选择集的元素结合。

同样绑定3位的数组

datum：

对于选择集中的每一个元素，都为其增加一个__data__属性，属性值为datum(value)的参数value。
此处的value并非一定要是number（数值）型，
也可以是string（字符串）、boolean（布尔型）和object（对象），
无论是什么类型，其工作过程都是给__data__赋值。
如果使用undefined和null作为参数，则将不会创建__data__属性。

在被绑定数据的选择集中添加元素后，新元素也会具有被绑定数据。

源代码：

    d3_selectionPrototype.datum = function(value) {  
    return arguments.length   
        ? this.property("__data__", value)   
        : this.property("__data__");  
    };  

data