看完该API后，至少会画出一个简单的图形 D3.js 入门
1. d3-selection: 【 选择作图区域 / 添加图形 】
允许强大的数据驱动文档对象模型 (DOM): 设置attributes, styles，properties HTML 或 text 内容等等。使用 data join 的 enter 和 exit 选择集可以用来根据具体的数据 add 或 remove 元素。
常用API
- d3.select( selector ) 从文档中选取第一个元素 ， 返回一个selection
- d3.selectAll( selector ) 从文档中选取所有匹配元素， 返回一个selection
- d3.selector( selector ) 返回一个函数 this 指向匹配到的元素
- d3.selectorAll( selector ) 返回一个函数 this 指向匹配到的元素
- d3.matcher( selector ) 测试一个元素是否符合某种选择器.
- d3.style( node, name ) 返回指定 node 的 name 对应的 style 属性值.
如果 ‘参数’ 为函数，则会在选择前执行对应的函数，并且会传递当前元素的关联数据 (d)，当前的索引 (i) 以及当前分组 (nodes)，在函数中 this 指向当前 DOM 元素(nodes[i]). 为函数时必须return一个元素，或者 null。
选择集可继续进行链式操作
- selection.select( selector )
- selection.selectAll( selector )
- selection.filter( filter ) // filter 可以是一个选择字符串也可以是一个函数
- selection.merge( otherSelection )
当前选择集中的任何空缺 (null) 都会被指定的 other 中的对应的元素填充(如果存在的话)，
如果 other 选择集有附加的组或者父元素，则将其忽略。
如果原选择集与指定的 other 选择集在同样的索引下都有元素，
则原选择集中的元素会被返回而 other 选择集中的元素会被忽略。 - selection.attr(name[, value]) 设置属性，value 可为函数
- selection.classed(names[, value])
names 可为数组 指定类名
value 可为 boolean类型，是否启用names，
为function时，为每个元素指定， 返回boolean
为空时，返回selection中第一个非空元素是否启用该names - selection.style(name[, value[, priority]]) // priority为优先级 null / important
- selection.property(name[, value])
有些 HTML 元素的属性比较特殊，不能直接使用 attr 和 style 操作，
比如文本域的 value 属性以及 checkbox 的 checked 属性。使用本方法可以操作这些属性。 - selection.text/html([value])
- selection.append(type)
- selection.insert(type[, before])
如果 type 为字符串则为选择集中每个选中的插入一个指定类型(标签名)的元素，插入的位置为第一个匹配 before 选择条件的元素 - selection.remove()
从当前文档中移除选中的元素。返回的选择集(被移除的元素)已经与文档脱离 - selection.clone([deep]) // boolean
- selection.sort(function)
划重点: 数据绑定和事件 - selection.data([data[, key]])
当数据分配给元素时，会被存储在元素的 _ data _ 属性上, 因此可以在重新选中元素时继续使用与元素对应的数据。 - selection.enter()
选择集通常在数据比节点多时用来创建缺失的节点
var div = d3.select("body")
.selectAll("div")
.data([4, 8, 15, 16, 23, 42])
.enter().append("div")
.text(function(d) { return d; });
// 如果 body 初始为空，
// 则上述代码会创建 6 个新的 DIV 元素并依次添加到 body 中，
// 并且将其文本内容设置为对应的数值
selection.exit()
选择集通常用来移除多余的元素selection.datum([value]) 单纯的改数据
获取或设置每个选中元素上绑定的数据。与 selection.data不同, 这个方法不会进行数据链接计算并且不影响索引, 不影响enter和exit选择集.selection.on( typenames[, listener[, capture]] )
typenames 可多个 'click mouseover ...'
typenames后面可以跟一个由( . )分割的可选的 name可选的名称允许在同一个事件类型上注册多个回调. 'click.foo'- 其他事件
对selection的控制
- selection.each(function)
- selection.call(function[, arguments…])
- selection.empty() // 当且仅当当前选择集中没有任何元素时返回 true.
- selection.nodes() // 返回选择集中被选中元素的元素数组。
- selection.node() // 返回选择集中第一个非空元素。如果选择集为空则返回 null。
- selection.size() // 返回选择集中包含的元素个数。
2. d3-scale: 比例尺 【 计算x，y轴 】
continuous scale： linear, power, log, identity, time, sequential color
- continuous(value) 根据给定的位于 domain 中的 value 返回对应的位于 range 中的值
- continuous.invert(value)
var x = d3.scaleLinear()
.domain([10, 130])
.range([0, 960]);
x(20); // 80
x(50); // 320
x.invert(80); // 20
x.invert(320); // 50
- continuous.domain([domain]) 指定多个值的话会生成一个分段的比例尺
- continuous.range([range]) 指定多个值的话会生成一个分段的比例尺
domain 和 range 长度不一致时，取交集
continuous.clamp( boolean )
设置钳位，启用后 则能保证返回的值总是处于范围内。continuous.ticks([count])
continuous.tickFormat([count[, specifier]])
var x = d3.scaleLinear()
.domain([-1, 1])
.range([0, 960]);
var ticks = x.ticks(5),
tickFormat = x.tickFormat(5, "+%");
ticks.map(tickFormat); // ["-100%", "-50%", "+0%", "+50%", "+100%"]
- continuous.nice([count])
比如计算后的 domain 为 [0.201479…, 0.996679…] 时，在经过取整之后会被扩展为 [0.2, 1.0] 取整 仅影响第一个和最后一个值
Scales
- d3.scaleLinear() // 线性比例尺 y = mx + b
- d3.scalePow() // 指数比例尺 y = mx^k + b
pow.exponent([exponent]) 特殊的方法，获得指数 - d3.scaleLog() // 对数比例尺 y = m log(x) + b.
- d3.scaleSqrt() 开方比例尺
- ... (d3.scaleIdentity(), d3.scaleLog())
- d3.scaleTime() // 需要注意时间类型
默认的 domain : [2000-01-01, 2000-01-02], range[0, 1]构造一个新的时间比例尺。
time.ticks([count]) // 间隔数
time.ticks([interval]) // 间隔时间
var x = d3.scaleTime()
.domain([new Date(2000, 0, 1, 0), new Date(2000, 0, 1, 2)]);
x.ticks(d3.timeMinute.every(15));
// [Sat Jan 01 2000 00:00:00 GMT-0800 (PST),
// Sat Jan 01 2000 00:15:00 GMT-0800 (PST),
// Sat Jan 01 2000 00:30:00 GMT-0800 (PST),
// Sat Jan 01 2000 00:45:00 GMT-0800 (PST),
// Sat Jan 01 2000 01:00:00 GMT-0800 (PST),
// Sat Jan 01 2000 01:15:00 GMT-0800 (PST),
// Sat Jan 01 2000 01:30:00 GMT-0800 (PST),
// Sat Jan 01 2000 01:45:00 GMT-0800 (PST),
// Sat Jan 01 2000 02:00:00 GMT-0800 (PST)]
time.tickFormat([count[, specifier]])
time.tickFormat([interval[, specifier]])
%Y - 年份，比如 2011.
%B - 月份，比如 February.
%b %d - 周, 比如 Feb 06.
%a %d - 天, 比如 Mon 07.
%I %p - 时, 比如 01 AM.
%I:%M - 分钟, 比如 01:23.
:%S - 秒, 比如 :45.
.%L - 毫秒, 比如 .012.
//如果想自定义自己的时间格式，请参考 [d3-time-format]
- d3.scaleUtc()
- d3.scaleSequential(interpolator) // 序列比例尺 domain 仅两个数值
使用跟定的 interpolator 函数构造一个新的序列比例尺。在应用比例尺时，可以传入的值[0, 1]。其中0表示最小值，1表示最大值。例如实现一个 HSL 具有周期性的颜色插值器：
var rainbow = d3.scaleSequential(function(t) {
return d3.hsl(t * 360, 1, 0.5) + "";
});
- d3.scaleDiverging(interpolator) // 发散比例尺 domain 仅三个数值
- d3.scaleQuantize() // 量化比例尺 【连续输入 => 非连续输出 】 y = m round(x) + b
var width = d3.scaleQuantize()
.domain([10, 100])
.range([1, 2, 4]);
width(20); // 1
width(50); // 2
width(80); // 4
width.invertExtent(2); // [40, 70]
- d3.scaleQuantile() // 分位数比例尺 【非连续输入 => 非连续输出 】
quantile(value)
quantile.invertExtent(value)
quantile.quantiles() - d3.scaleThreshold()
var color = d3.scaleThreshold()
.domain([0, 1])
.range(["red", "white", "green"]);
color(-1); // "red"
color(0); // "white"
color(0.5); // "white"
color(1); // "green"
color(1000); // "green"
color.invertExtent("red"); // [undefined, 0]
color.invertExtent("white"); // [0, 1]
color.invertExtent("green"); // [1, undefined]
d3.scaleOrdinal([range]) // 序数比例尺
序数比例尺的输出域和输入域都是离散的。例如序数比例尺可以将一组命名类别映射到一组颜色。或者确定一组条形图在水平方向的位置等等。
ordinal.unknown([value])
如果指定了 value 则将未知输入的输出值设置为指定的值。如果没有指定 value 则返回当前的未知值d3.scaleBand() // 分段比例尺
使用空的 domain：[0, 1]，不设置 padding, 不设置 rounding 以及 alignment 构造一个新的分段比例尺。d3.scalePoint() // 标点比例尺
使用空的 domain, 单位 range：[0, 1], 不指定 padding ，rounding 以及 alignment 构造一个新的标点比例尺.
3. d3-axis: 坐标轴 【 根据计算的x，y轴创建坐标轴 】
坐标轴组件可以将 scales 显示为人类友好的刻度标尺参考，减轻了在可视化中的视觉任务。
- d3.axisTop(scale)
- d3.axisBottom(scale)
- d3.axisLeft(scale)
- d3.axisRight(scale)
以下 axis = d3.axisRight/..()
- axis.ticks(arguments…)
- axis.ticks([count[, specifier]])
-
axis.ticks([interval[, specifier]])
针对不同比例尺，有不同的ticks
g.append("g").call(d3.axisLeft(y).ticks(10, 'ms')) // 通过这样的方式 可使用链式调用
- axis.tickValues([values]) // 如果存在value 则更改传入的刻度
- axis.tickFormat([format]) // 更改文本格式化
控制内侧外侧刻度的大小， 默认为6 - axis.tickSize([size])
- axis.tickSizeInner([size])
- axis.tickSizeOuter([size])
外侧刻度大小控制着刻度线的长度。外侧刻度表示的是坐标轴最外侧两端的刻度线。内侧刻度和外侧刻度不同，内侧刻度是一个个单独的 line 元素，而外侧刻度则实际上是坐标轴线 path 的一部分。此外外侧刻度可能和第一个或最后一个内侧刻度重合。 - axis.tickPadding([padding]) // 设置刻度和刻度文本之间的间距 默认为3
