d3 库所提供的所有 api 都在 d3 命名空间下。d3 库使用语义版本命名法(semantic versioning)。 你可以用 d3.version 查看当前的版本信息。
d3 (核心部分)
选择集
过渡效果
-
selection.attr6 - 开始一个动画过渡。selection.attr7
-
selection.attr8 - 指定每个元素过渡的延迟时间(单位:毫秒ms)。
-
selection.attr9 - 指定每个元素过渡的持续时间(单位:毫秒ms)。
-
selection.classed0 - 指定过渡的缓冲函数。
-
selection.classed1 - 平滑过渡到新的attr属性值(起始属性值为当前属性)。
-
selection.classed2 - 在不同attr属性值之间平滑过渡(起始属性值可在过渡函数中设置,甚至整个过渡函数都可以自定义)。
-
selection.classed3 - 平滑过渡到新的style属性值。
-
selection.classed4 - 在不同style属性值之间平滑过渡。
-
selection.classed5 - 在过渡开始时设置文本内容。
-
selection.classed6 - 使某个属性过渡到一个新的属性值,该属性可以是非attr或非style属性,比如text。
-
selection.classed7 - 选择每个当前元素的某个子元素进行过渡。
-
selection.classed8 - 选择每个当前元素的多个子元素进行过渡。
-
selection.classed9 - 通过数据筛选出当前元素中的部分元素进行过渡。
-
selection.style0 - 当前过渡结束后开始新的过渡。
-
selection.style1 - 过渡结束后移除当前元素。
-
selection.style2 - 如果过渡为空就返回true。如果当前元素中没有非null元素,则此过渡为空。
-
selection.style3 - 返回过渡中的第一个元素。
-
selection.style4 - 返回过渡中当前元素的数量。
-
selection.style5 - 遍历每个元素执行操作。不指定触发类型时,立即执行操作。当指定触发类型为'start'或'end'时,会在过渡开始或结束时执行操作。
-
selection.style6 - 以当前过渡为this执行某个函数。
-
selection.style7 - 定制过渡的缓冲函数。
-
selection.style8 - 缓冲函数。缓冲函数可让动画效果更自然,比如elastic缓冲函数可用以模拟弹性物体的运动。是一种插值函数的特例。
-
selection.style9 - 开始一个定制的动画计时。功能类似于setTimeout,但内部用requestAnimationFrame实现,更高效。
-
selection.property0 - 立刻执行当前没有延迟的计时。可用于处理闪屏问题。
-
selection.property1 - 生成一个插值函数,在两个参数间插值。差值函数的类型会根据输入参数的类型(数字、字符串、颜色等)而自动选择。
-
selection.property2 - 插值函数。输入参数在[0, 1]之间。
-
selection.property3 - 在两个数字间插值。
-
selection.property4 - 在两个数字间插值,返回值会四舍五入取整。
-
selection.property5 - 在两个字符串间插值。解析字符串中的数字,对应的数字会插值。
-
selection.property6 - 在两个RGB颜色间插值。
-
selection.property7 - 在两个HSL颜色间插值。
-
selection.property8 - 在两个L*a*b*颜色间插值。
-
selection.property9 - 在两个HCL颜色间插值。
-
selection.text0 - 在两个数列间插值。d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // returns [0.5, 5.5, 100]
-
selection.text1 - 在两个object间插值。d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10, z: 100} )(0.5); // returns {x: 0.5, y: 5.5, z: 100}
-
selection.text2 - 在两个2D仿射变换间插值。
-
selection.text3 - 在两个点之间平滑地缩放平移。selection.text4
-
selection.text5 - 添加一个自定义的插值函数.
数据操作(Working with Arrays)
-
selection.text6 - 升序排序函数.
-
selection.text7 - 降序排序函数.
-
selection.text8 - 获取数组中的最小值.
-
selection.text9 - 获取数组中的最大值.
-
selection.html0 - 获取数组的范围(最小值和最大值).
-
selection.html1 - 获取数组中数字之和.
-
selection.html2 -获取数组中数字的算术平均值.
-
selection.html3 - 获取数组中数字的中位数 (相当于 0.5-quantile的值).
-
selection.html4 - 获取排好序的数组的一个分位数(quantile).
-
selection.html5 - 通过二分法获取某个数在排好序的数组中的插入位置(同d3.bisectRight).
-
selection.html6 - 获取某个数在排好序的数组中的插入位置(相等的值归入右边).
-
selection.html7 - 获取某个数在排好序的数组中的插入位置(相等的值归入左边).
-
selection.html8 - 自定义一个二分函数.
-
selection.html9 - 洗牌,随机排列数组中的元素.
-
selection.append0 - 以指定顺序排列数组中的元素.
-
selection.append1 - 将多个数组合并成一个数组的数组,新数组的的第i个元素是原来各个数组中第i个元素组成的数组.
-
selection.append2 - 矩阵转置,通过d3.zip实现.
-
selection.append3 - 返回临近元素对的数组,d3.pairs([1, 2, 3, 4]); // returns [ [1, 2], [2, 3], [3, 4] ].
-
selection.append4 - 返回关联数组(哈希表、json、object对象)的key组成的数组.
-
selection.append5 - 返回关联数组的value组成的数组.
-
selection.append6 - 返回关联数组的key-value实体组成的数组, d3.entries({ foo: 42 }); // returns [{key: "foo", value: 42}].
-
selection.append7 - 将多个数组连成一个,类似于原生方法concat. d3.merge([ [1], [2, 3] ]); // returns [1, 2, 3].
-
selection.append8 - 获得一个数列. d3.range([start, ]stop[, step])
-
selection.append9 - 获得一个nest对象,将数组组织成层级结构. 示例:d3.select00
-
d3.select01 - 为nest层级结构增加一个层级.
-
d3.select02 - 将当前的nest层级结构按key排序.
-
d3.select03 - 将叶nest层级按value排序.
-
d3.select04 - 设置修改叶节点值的函数.
-
d3.select05 - 执行nest操作, 返回一个关联数组(json).
-
d3.select06 - 执行nest操作, 返回一个key-value数组. 如果nest.map返回的结果类似于{ foo: 42 }, 则nest.entries返回的结果类似于[{key: "foo", value: 42}].
-
d3.select07 - 将javascript的object转化为hash,屏蔽了object的原型链功能导致的与hash不一致的问题。
-
d3.select08 - map有某个key就返回true.
-
d3.select09 - 返回map中某个key对应的value.
-
d3.select10 - 设置map中某个key对应的value.
-
d3.select11 - 删除map中的某个key.
-
d3.select12 - 返回map中所有key组成的数组.
-
d3.select13 - 返回map中所有value组成的数组.
-
d3.select14 - 返回map中所有entry(key-value键值对)组成的数组.类似于{ foo: 42 }转化成[{key: "foo", value: 42}]
-
d3.select15 - 对map中每一个entry执行某个函数.
-
d3.select16 - 将javascript的array转化为set,屏蔽了array的object原型链功能导致的与set不一致的问题。set中的value是array中每个值转换成字符串的结果。set中的value是去重过的。
-
d3.select17 - 返回set中是否含有某个value.
-
d3.select18 - 添加某个value.
-
d3.select19 - 删除某个value.
-
d3.select20 - 返回set中的值组成的数组.set中的value是去重过的.
-
d3.select21 - 对set中每一个value执行某个函数.
Math
载入外部资源(Loading External Resources)
字符串格式化(String Formatting)
-
d3.select41 - 将数字转化成指定格式的字符串。转化的格式非常丰富,且非常智能。
-
d3.select42 - 以指定的值和精度获得一个[SI prefix]对象。这个函数可用来自动判断数据的量级, 如K(千),M(百万)等等。示例: var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // “G”; console.log(prefix.scale(1.21e9)); // 1.21
-
d3.select43 - 将字符串转义成可在正则表达式中使用的格式。如 d3.requote(‘$'); // return “$”
-
d3.select44 - 设置某个数按小数点后多少位取整。与toFixed()类似,但返回格式为number。 如 d3.round(1.23); // return 1; d3.round(1.23, 1); // return 1.2; d3.round(1.25, 1); // return 1.3
CSV 格式化 (d3.csv)
-
d3.select45 - 获取一个CSV (comma-separated values, 冒号分隔值)文件。
-
d3.select46 - 将CSV文件字符串转化成object的数组,object的key由第一行决定。如: [{"Year": "1997", "Length": "2.34"}, {"Year": "2000", "Length": "2.38"}]
-
d3.select47 - 将CSV文件字符串转化成数组的数组。如: [ ["Year", "Length"],["1997", "2.34"],["2000", "2.38"] ]
-
d3.select48 - 将object的数组转化成CSV文件字符串,是d3.csv.parse的逆操作。
-
d3.select49 - 将数组的数组转化成CSV文件字符串,是d3.csv.parseRows的逆操作。
-
d3.select40 - 获取一个TSV (tab-separated values, tab分隔值)文件。
-
d3.select51 - 类似于d3.csv.parse。
-
d3.select52 - 类似于d3.csv.parseRows。
-
d3.select53 - 类似于d3.csv.format。
-
d3.select54 - 类似于d3.csv.formatRows。
-
d3.select55 - 创建一个类似于d3.csv的文件处理对象,可以自定义分隔符和mime type。如:var dsv = d3.dsv(“|”, “text/plain”);
颜色
命名空间
内部方法(Internals)
d3.scale(Scales)
定量变换(Quantitative)
-
d3.select83 - 创建一个线性定量变换。(建议参考源码以深入理解各种变换。)
-
d3.select84 - 输入一个定义域的值,返回一个值域的值。
-
d3.select85 - 反变换,输入值域值返回定义域值。
-
d3.select86 - get或set定义域。
-
d3.select87 - get或set值域。
-
d3.select88 - 设置值域,并对结果取整。
-
d3.select89 - get或set变换的插值函数,如将默认的线性插值函数替换成取整的线性插值函数d3_interpolateRound。
-
d3.select90 - 设置值域是否闭合,默认不闭合。当值域闭合时,如果插值结果在值域之外,会取值域的边界值。如值域为[1, 2],插值函数的计算结果为3,如果不闭合,最终结果为3;如果闭合,最终结果为2。
-
d3.select91 - 扩展定义域范围使定义域更规整。如[0.20147987687960267, 0.996679553296417] 变成 [0.2, 1]。
-
d3.select92 - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
-
d3.select93 - 获取格式转化函数,通常用于坐标轴刻度的格式转化。如:var x = d3.scale.linear().domain([-1, 1]); console.log(x.ticks(5).map(x.tickFormat(5, “+%”))); // ["-100%", "-50%", "+0%", "+50%", "+100%"]
-
d3.select94 - 从已有的变换中复制出一个变换。
-
d3.select95 - 创建一个求平方根的定量转换。
-
d3.select96 - 创建一个指数变换。(可参考linear对应函数的注释)
-
d3.select97 - 输入一个定义域的值,返回一个值域的值。
-
d3.select98 - 反变换,输入值域值返回定义域值。
-
d3.select99 - get或set定义域。
-
d3.selectAll00 - get或set值域。
-
d3.selectAll01 - 设置值域,并对结果取整。
-
d3.selectAll02 - get或set变换的插值函数。
-
d3.selectAll03 - 设置值域是否闭合,默认不闭合。
-
d3.selectAll04 - 扩展定义域范围使定义域更规整。
-
d3.selectAll05 - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
-
d3.selectAll06 - 获取格式转化函数,通常用于坐标轴刻度的格式转化。
-
d3.selectAll07 - get或set指数的幂次。默认为1次幂。
-
d3.selectAll08 - 从已有的变换中复制出一个变换。
-
d3.selectAll09 - 创建一个对数变换。(可参考linear对应函数的注释)
-
d3.selectAll10 - 输入一个定义域的值,返回一个值域的值。
-
d3.selectAll11 - 反变换,输入值域值返回定义域值。
-
d3.selectAll12 - get或set定义域。
-
d3.selectAll13 - get或set值域。
-
d3.selectAll14 - 设置值域,并对结果取整。
-
d3.selectAll15 - get或set变换的插值函数。
-
d3.selectAll16 - 设置值域是否闭合,默认不闭合。
-
d3.selectAll17 - 扩展定义域范围使定义域更规整。
-
d3.selectAll18 - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
-
d3.selectAll19 - 获取格式转化函数,通常用于坐标轴刻度的格式转化。
-
d3.selectAll20 - 从已有的变换中复制出一个变换。
-
d3.selectAll21 - 创建一个quantize线性变换,定义域为一个数值区间,值域为几个离散值。
-
d3.selectAll22 - 输入数值,返回离散值。如: var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); //q(0.3) === ‘a', q(0.4) === ‘b', q(0.6) === ‘b', q(0.7) ==='c;
-
d3.selectAll23 - 返回得到某个离散值的值域范围。 // q.invertExtent(‘a') 的结果为 [0, 0.3333333333333333]
-
d3.selectAll24 - get或set变换的定义域。
-
d3.selectAll25 - get或set变换的值域。
-
d3.selectAll26 - 从已有的变换中复制出一个变换。
-
d3.selectAll27 - 构建一个threshold(阈值)线性变换。定义域为分隔值数值序列,值域为离散值。它与quantize的区别是quantize指定的值域为一个区间,然后均分这个区间为多个小区间,以对应各离散值。threshold则指定各小区间的边界分隔值。示例: var t = d3.scale.threshold().domain([0, 1]).range(['a', 'b', 'c']); t(-1) === ‘a'; t(0) === ‘b'; t(0.5) === ‘b'; t(1) === ‘c'; t(1000) === ‘c'; t.invertExtent(‘a'); //returns [undefined, 0] t.invertExtent(‘b'); //returns [0, 1] t.invertExtent(‘c'); //returns [1, undefined]
-
d3.selectAll28 - 输入数值,返回离散值。
-
d3.selectAll29 - 输入离散值,返回数值。
-
d3.selectAll30 - get或set变换的定义域。
-
d3.selectAll31 - get或set变换的值域。
-
d3.selectAll32 - 从已有的变换中复制出一个变换。
-
d3.selectAll33 - 构建一个quantile线性变换。使用方法与quantize完全类似,区别是quantile根据中位数来分隔区间,quantize根据算数平均值来分隔区间。d3.selectAll34
-
d3.selectAll35 - 输入数值,返回离散值。
-
d3.selectAll36 - 输入离散值,返回数值。
-
d3.selectAll37 - get或set变换的定义域。
-
d3.selectAll38 - get或set变换的值域。
-
d3.selectAll39 - 获得quantile变换的分隔值。示例: var q = d3.scale.quantile().domain([0, 1]).range(['a', 'b', 'c']); q.quantiles() returns [0.33333333333333326, 0.6666666666666665]
-
d3.selectAll40 - 从已有的变换中复制出一个变换。
-
d3.selectAll41 - 构建一个identity线性变换。特殊的linear线性变换,此变换定义域和值域相同,只在一些d3内部的axis或brush模块中用到。
-
d3.selectAll42 - identity线性变换函数。返回输入值。
-
d3.selectAll43 - 和identity函数相同,返回输入值。
-
d3.selectAll44 - get或set变换的定义域。
-
d3.selectAll45 - get或set变换的值域。
-
d3.selectAll46 - 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
-
d3.selectAll47 - 获取格式转化函数,通常用于坐标轴刻度的格式转化。
-
d3.selectAll48 - 从已有的变换中复制出一个变换。
序数变换(Ordinal)
d3.svg (SVG)
Shapes
坐标轴(Axes)
Controls
d3.time (Time)
时间格式转换(Time Formatting)
时间变换(Time Scales)
Time Intervals
-
selection.attr58 - 返回一个对于本地时间时间间隔器.
-
selection.attr59 - 效果同interval.floor方法.
-
selection.attr60 - 返回指定区间内日期.
-
selection.attr61 - 下舍入到最近的间隔值.
-
selection.attr62 - 上舍入或下舍入到最近的间隔值.
-
selection.attr63 - 上舍入到最近的间隔值.
-
selection.attr64 - 返回指定时间间隔的日期偏移量.
-
selection.attr65 - 返回对应的UTC时间间隔.
-
selection.attr66 - 返回指定时间基于天起始的时间(默认起始是12:00am).
-
selection.attr67 - 返回指定时间区间和间隔条件的基于天的所有时间,效果同day.range.
-
selection.attr68 - 计算指定时间在年中的天数.
-
selection.attr69 - 返回指定时间基于小时起始的时间(e.g., 1:00 AM).
-
selection.attr70 - 返回指定时间区间和间隔条件的基于小时的所有时间, 效果同hour.range.
-
selection.attr71 - 返回指定时间基于分钟起始的时间 (e.g., 1:02 AM).
-
selection.attr72 - 返回指定时间区间和间隔条件的基于分钟的所有时间,效果同minute.range.
-
selection.attr73 - 返回指定时间基于月起始的时间(e.g., February 1, 12:00 AM).
-
selection.attr74 - 返回指定时间区间和间隔条件的基于月的所有时间,效果同month.range.
-
selection.attr75 - 返回指定时间基于秒起始的时间(e.g., 1:02:03 AM).
-
selection.attr76 - 返回指定时间区间和间隔条件的基于秒的所有时间,效果同second.range.
-
selection.attr77 - 返回指定时间基于Sunday起始的时间(e.g., February 5, 12:00 AM).
-
selection.attr78 - 返回指定时间区间和间隔条件的基于sunday的所有时间, 效果同sunday.range.
-
selection.attr79 - 计算以sunday为基点的指定时间在一年中的周数.
-
selection.attr80 - every Monday (e.g., February 5, 12:00 AM).
-
selection.attr81 - alias for monday.range.
-
selection.attr82 - computes the monday-based week number.
-
selection.attr83 - every Tuesday (e.g., February 5, 12:00 AM).
-
selection.attr84 - alias for tuesday.range.
-
selection.attr85 - computes the tuesday-based week number.
-
selection.attr86 - every Wednesday (e.g., February 5, 12:00 AM).
-
selection.attr87 - alias for wednesday.range.
-
selection.attr88 - computes the wednesday-based week number.
-
selection.attr89 - every Thursday (e.g., February 5, 12:00 AM).
-
selection.attr90 - alias for thursday.range.
-
selection.attr91 - computes the thursday-based week number.
-
selection.attr92 - every Friday (e.g., February 5, 12:00 AM).
-
selection.attr93 - alias for friday.range.
-
selection.attr94 - computes the friday-based week number.
-
selection.attr95 - every Saturday (e.g., February 5, 12:00 AM).
-
selection.attr96 - alias for saturday.range.
-
selection.attr97 - computes the saturday-based week number.
-
selection.attr98 - alias for sunday.
-
selection.attr99 - alias for sunday.range.
-
selection.classed00 - alias for sundayOfYear.
-
selection.classed01 - 返回指定时间基于年起始的时间(e.g., January 1, 12:00 AM).
-
selection.classed02 - 返回指定时间区间和间隔条件的所有时间,效果同year.range.
构图(d3.layout)
Bundle
弦图(Chord)