Menu
Woocommerce Menu

我们在软件中主要用到d3.js的核心函数,3522vip靠谱吗:d3 (核心部分)

0 Comment


D3 库所提供的所有 API 都在 d3 命名空间下。d3 库使用语义版本命名法。
你可以用 d3.version 查看当前的版本信息。

AxeSlide软件项目梳理   canvas绘图系列知识点整理

d3 (核心部分)
选择集
d3.select – 从当前文档中选择一系列元素。
d3.selectAll – 从当前文档中选择多项元素。
selection.attr – 设置或获取指定属性。

序数比例尺的定义域和值域都是离散的。,如果需要通过输入一些离散的值得到另一些离散的值,这时候就要考虑序数比例尺。

d3 选择集 d3.select – 从当前文档中选择一系列元素。 d3.selectAll –
从当前文档中选择多项元素。 selection.attr – 设置或获取指定属性。
selection.classed – 添加或删除选定元素的 CSS 类。 selection.style –
设置或删除 CSS 属性。style优先级高于attr。 selection.property –
设置或获原生的属性值。 selection.text –
设置或获取选定元素的标签体文本内容。 selection.html –
设置或获取选定元素的 HTML 内容 selection.append –
创建并添加新元素到选定元素后。 selection.insert –
创建并添加新元素到选定元素前。 selection.remove –
从当前文档对象中删除选定的元素。 selection.data –
设置或获取一组元素的绑定数据(get or set data for a group of elements,
while computing a relational join.) selection.enter –
返回缺失元素的占位对象,指向绑定的数据中比选定元素集多出的一部分元素。
selection.exit –
返回多余元素的元素集,即选择元素中比绑定数据多出的一部分。(关于data,
enter, exit原理的示例1, 示例2, 示例3) selection.datum –
设置或获取单独元素的数据,不进行关联。(get or set data for individual
elements, without computing a join.) selection.filter –
根据绑定的数据过滤选择集。 selection.sort –
根据绑定的数据对选择的元素进行排序。 selection.order –
对文档中的元素重排序以匹配选择集。 selection.on – 添加或删除事件监听器。
selection.transition – 启动一个过渡效果,可以理解为动画。
selection.interrupt – 立即停止所有正在进行的动画动作。 selection.each –
为每个选择的元素集调用指定的函数。 selection.call –
为当前选择的元素集调用指定的函数。 selection.empty –
测试选择集是否为空。 selection.node – 返回选择集中的第一个元素。
selection.size – 返回选择集中的元素个数。 selection.select –
选择所选的元素中的第一个子元素组成新的选择集。 selection.selectAll –
选择所选的元素中的多个子元素组成新的选择集。 d3.selection –
选择集对象原型(可通过 d3.selection.prototype 为选择集增强功能)。
d3.event – 获取当前交互的用户事件。 d3.mouse –
获取鼠标的相对某元素的坐标。 d3.touches –
获取相对某元素的触控点坐标。过渡效果 d3.transition –
开始一个动画过渡。简单教程 transition.delay –
指定每个元素过渡的延迟时间。 transition.duration –
指定每个元素过渡的持续时间。 transition.ease – 指定过渡的缓冲函数。
transition.attr – 平滑过渡到新的attr属性值。 transition.attrTween –
在不同attr属性值之间平滑过渡(起始属性值可在过渡函数中设置,甚至整个过渡函数都可以自定义)。
transition.style – 平滑过渡到新的style属性值。 transition.styleTween –
在不同style属性值之间平滑过渡。 transition.text –
在过渡开始时设置文本内容。 transition.tween –
使某个属性过渡到一个新的属性值,该属性可以是非attr或非style属性,比如text。
transition.select – 选择每个当前元素的某个子元素进行过渡。
transition.selectAll – 选择每个当前元素的多个子元素进行过渡。
transition.filter – 通过数据筛选出当前元素中的部分元素进行过渡。
transition.transition – 当前过渡结束后开始新的过渡。 transition.remove –
过渡结束后移除当前元素。 transition.empty –
如果过渡为空就返回true。如果当前元素中没有非null元素,则此过渡为空。
transition.node – 返回过渡中的第一个元素。 transition.size –
返回过渡中当前元素的数量。 transition.each –
遍历每个元素执行操作。不指定触发类型时,立即执行操作。当指定触发类型为’start’或’end’时,会在过渡开始或结束时执行操作。
transition.call – 以当前过渡为this执行某个函数。 d3.ease –
定制过渡的缓冲函数。 ease –
缓冲函数。缓冲函数可让动画效果更自然,比如elastic缓冲函数可用以模拟弹性物体的运动。是一种插值函数的特例。
d3.timer –
开始一个定制的动画计时。功能类似于setTimeout,但内部用requestAnimationFrame实现,更高效。
d3.timer.flush – 立刻执行当前没有延迟的计时。可用于处理闪屏问题。
d3.interpolate –
生成一个插值函数,在两个参数间插值。差值函数的类型会根据输入参数的类型而自动选择。
interpolate – 插值函数。输入参数在[0, 1]之间。 d3.interpolateNumber –
在两个数字间插值。 d3.interpolateRound –
在两个数字间插值,返回值会四舍五入取整。 d3.interpolateString –
在两个字符串间插值。解析字符串中的数字,对应的数字会插值。
d3.interpolateRgb – 在两个RGB颜色间插值。 d3.interpolateHsl –
在两个HSL颜色间插值。 d3.interpolateLab – 在两个L*a*b*颜色间插值。
d3.interpolateHcl – 在两个HCL颜色间插值。 d3.interpolateArray –
在两个数列间插值。d3.interpolateArray( [0, 1], [1, 10, 100] ); //
returns [0.5, 5.5, 100] d3.interpolateObject –
在两个object间插值。d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10, z:
100} ); // returns {x: 0.5, y: 5.5, z: 100} d3.interpolateTransform –
在两个2D仿射变换间插值。 d3.interpolateZoom –
在两个点之间平滑地缩放平移。示例 d3.interpolators –
添加一个自定义的插值函数.数据操作 d3.ascending – 升序排序函数.
d3.descending – 降序排序函数. d3.min – 获取数组中的最小值. d3.max –
获取数组中的最大值. d3.extent – 获取数组的范围. d3.sum –
获取数组中数字之和. d3.mean -获取数组中数字的算术平均值. d3.median –
获取数组中数字的中位数 . d3.quantile – 获取排好序的数组的一个分位数.
d3.bisect – 通过二分法获取某个数在排好序的数组中的插入位置.
d3.bisectRight – 获取某个数在排好序的数组中的插入位置. d3.bisectLeft –
获取某个数在排好序的数组中的插入位置. d3.bisector – 自定义一个二分函数.
d3.shuffle – 洗牌,随机排列数组中的元素. d3.permute –
以指定顺序排列数组中的元素. d3.zip –
将多个数组合并成一个数组的数组,新数组的的第i个元素是原来各个数组中第i个元素组成的数组.
d3.transpose – 矩阵转置,通过d3.zip实现. d3.pairs –
返回临近元素对的数组,d3.pairs; // returns [ [1, 2], [2, 3], [3,
4] ]. d3.keys – 返回关联数组的key组成的数组. d3.values –
返回关联数组的value组成的数组. d3.entries –
返回关联数组的key-value实体组成的数组, d3.entries; // returns [{key:
“foo”, value: 42}]. d3.merge –
将多个数组连成一个,类似于原生方法concat. d3.merge; // returns [1, 2,
3]. d3.range – 获得一个数列. d3.range([start, ]stop[, step])
d3.nest – 获得一个nest对象,将数组组织成层级结构.
示例: nest.key –
为nest层级结构增加一个层级. nest.sortKeys –
将当前的nest层级结构按key排序. nest.sortValues –
将叶nest层级按value排序. nest.rollup – 设置修改叶节点值的函数. nest.map

软件参考d3的知识点

我们在软件中主要用到d3.js的核心函数d3.interpolateZoom –
在两个点之间平滑地缩放平移。请查看示例,效果如下平滑的缩放平移。

 3522vip靠谱吗 1

 实现该效果使用d3的js代码

 1         var width = 960,
 2             height = 500,
 3             radius = 10;
 4 
 5         var p0 = [250, 200, 60],
 6             p1 = [560, 300, 120];
 7 
 8         var svg = d3.select("body").append("svg")
 9             .attr("width", width)
10             .attr("height", height)
11           .append("g")
12             .call(transition, p0, p1);
13 
14         svg.append("path")
15             .attr("class", "mesh")
16             .attr("d", d3.hexbin()
17               .size([width, height])
18               .radius(radius)
19               .mesh);
20 
21         svg.selectAll("circle")
22             .data([p0, p1])
23           .enter().append("circle")
24             .attr("class", function (d, i) { return i ? "end" : "start"; })
25             .attr("cx", function (d) { return d[0]; })
26             .attr("cy", function (d) { return d[1]; })
27             .attr("r", function (d) { return d[2] / 2 - .5; });
28 
29         function transition(svg, start, end) {
30             var center = [width / 2, height / 2];
31               var  i = d3.interpolateZoom(start, end);
32 
33             svg
34                 .attr("transform", transform(start))
35               .transition()
36                 .delay(250)
37                 .duration(i.duration * 2)
38                 .attrTween("transform", function () {
39 
40                     return function (t) {
41                         var data1 = i(t);
42                       
43                         var data2 = transform(data1);
44                         return data2;
45                     };
46                 })
47                 .each("end", function () { d3.select(this).call(transition, end, start); });
48 
49             function transform(p) {
50                 var k = height / p[2];
51                 console.log(k);
52                 var trans= "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
53               //  console.log(trans);
54                 return trans;
55             }
56         }

应用到我们的canvas绘图也一样,主要初始化p0,p1两个参数,通过d3.interpolateZoom(start,
end)得到计算当前时间t下具体位置的函数t。

核心计算代码如下:

 1 // p0 = [ux0, uy0, w0]
 2 // p1 = [ux1, uy1, w1]
 3 export class interpolateZoom {
 4     rou = Math.SQRT2;
 5     rou2 = 2;
 6     rou4 = 4;
 7     p0;
 8     p1;
 9     ux0; uy0; w0;
10     ux1; uy1; w1;
11     dx;
12     dy;
13     d2;
14     d1;
15     b0;
16     b1;
17     r0;
18     r1;
19     dr;
20     S;
21     duration: number;
22 
23     constructor(p0, p1, rou) {
24         if (rou != null && rou != undefined) {
25             this.rou = rou;
26             this.rou2 = Math.pow(this.rou, 2);
27             this.rou4 = Math.pow(this.rou, 4);
28         }
29         this.p0 = p0;
30         this.p1 = p1;
31         this.ux0 = p0[0], this.uy0 = p0[1], this.w0 = p0[2],
32             this.ux1 = p1[0], this.uy1 = p1[1], this.w1 = p1[2];
33         this.dx = this.ux1 - this.ux0,
34             this.dy = this.uy1 - this.uy0,
35             this.d2 = this.dx * this.dx + this.dy * this.dy,
36             this.d1 = Math.sqrt(this.d2),
37             this.b0 = (this.w1 * this.w1 - this.w0 * this.w0 + this.rou4 * this.d2) / (2 * this.w0 * this.rou2 * this.d1),
38             this.b1 = (this.w1 * this.w1 - this.w0 * this.w0 - this.rou4 * this.d2) / (2 * this.w1 * this.rou2 * this.d1),
39             this.r0 = Math.log(Math.sqrt(this.b0 * this.b0 + 1) - this.b0),
40             this.r1 = Math.log(Math.sqrt(this.b1 * this.b1 + 1) - this.b1),
41             this.dr = this.r1 - this.r0,
42             this.S = (this.dr || Math.log(this.w1 / this.w0)) / this.rou;
43         //console.log(this.rou,this.S);
44         this.duration = this.S * 1000 / 1.2;//除1.2 将duration缩小点
45 
46     }
47     interpolate(t) {
48         var s = t * this.S;
49         if (this.dr) {
50             // General case.
51             var coshr0 = this.cosh(this.r0),
52                 u = this.w0 / (this.rou2 * this.d1) * (coshr0 * this.tanh(this.rou * s + this.r0) - this.sinh(this.r0));
53             return [
54                 this.ux0 + u * this.dx,
55                 this.uy0 + u * this.dy,
56                 this.w0 * coshr0 / this.cosh(this.rou * s + this.r0)
57             ];
58         }
59         // Special case for u0 ~= u1.
60         return [
61             this.ux0 + t * this.dx,
62             this.uy0 + t * this.dy,
63             this.w0 * Math.exp(this.rou * s)
64         ];
65     }
66 
67     cosh(x) {
68         return (Math.exp(x) + Math.exp(-x)) / 2;
69     }
70     sinh(x) {
71         return (Math.exp(x) - Math.exp(-x)) / 2;
72     }
73     tanh(x) {
74         return this.sinh(x) / this.cosh(x);
75     }
76 }

 

selection.classed – 加入或删除选定元素的 CSS 类(CSS class)。

  • d3.scale.orinal():构建一个序数比例尺
  • ordinal(x) :输入定义域内的一个离散值,返回值域内一个离散值
  • ordinal.domain([values]): 设定和获取定义域
  • ordinal.range([values]) :设定或获取值域
  • ordinal.rangePoint(interval,[padding]):接收一个连续的区间,然后根据定义域中离散值的数量将其分段,分段值即为值域的离散值。interval是区间,padding是边界部分留下的空白。
  • ordinal.rangeRoundPoints(interval,[padding])
    :和ranggePoint()一样,但是会将结果取正
  • ordinal.rangeBands(interval,[padding],[outerpadding]) 代替
    range()设定值域,接收一个连续的区间,然后根据定义域中离散值的数量将其分段,但是分段方法不同。
  • ordinal.rangeRoundBands():和rangeBands()一样,但是会将结果取整。
  • ordinal.rangeBand():返回使用rangeBands()设定后每一段的宽度。
  • ordinal.rangeExtend():返回一个数组,数组中存有值域的最大值和最小值。
  • 执行nest操作, 返回一个关联数组. nest.entries – 执行nest操作,
    返回一个key-value数组. 如果nest.map返回的结果类似于{ foo: 42 },
    则nest.entries返回的结果类似于[{key: “foo”, value: 42}]. d3.map –
    将javascript的object转化为hash,屏蔽了object的原型链功能导致的与hash不一致的问题。
    map.has – map有某个key就返回true. map.get – 返回map中某个key对应的value.
    map.set – 设置map中某个key对应的value. map.remove – 删除map中的某个key.
    map.keys – 返回map中所有key组成的数组. map.values –
    返回map中所有value组成的数组. map.entries –
    返回map中所有entry组成的数组.类似于{ foo: 42 }转化成[{key: “foo”,
    value: 42}] map.forEach – 对map中每一个entry执行某个函数. d3.set –
    将javascript的array转化为set,屏蔽了array的object原型链功能导致的与set不一致的问题。set中的value是array中每个值转换成字符串的结果。set中的value是去重过的。
    set.has – 返回set中是否含有某个value. set.add – 添加某个value.
    set.remove – 删除某个value. set.values –
    返回set中的值组成的数组.set中的value是去重过的. set.forEach –
    对set中每一个value执行某个函数.Math d3.random.normal –
    利用正态分布产生一个随机数. d3.random.logNormal –
    利用对数正态分布产生一个随机数. d3.random.irwinHall –
    利用Irwin–Hall分布产生一个随机数. d3.transform –
    将svg的tranform格式转化为标准的2D转换矩阵字符串格式.载入外部资源(Loading
    External Resources) d3.xhr – 发起XMLHttpRequest请求获取资源。 xhr.header
  • 设置 request header。 xhr.mimeType – 设置 Accept request
    header,并重写 response MIME type。 xhr.response –
    设置response返回值转化函数。如 function { return JSON.parse; } xhr.get –
    发起GET请求。 xhr.post – 发起POST请求。 xhr.send –
    以指定的方法和数据发起请求。 xhr.abort – 终止当前请求。 xhr.on –
    为请求添加”beforesend”, “progress”, “load” 或 “error” 等事件监听器。
    d3.text – 请求一个text文件。 d3.json – 请求一个JSON。 d3.html –
    请求一个html文本片段。 d3.xml – 请求一个XML文本片段。 d3.csv –
    请求一个CSV(comma-separated values, 逗号分隔值)文件。 d3.tsv –
    请求一个TSV(tab-separated values, tab分隔值)文件。字符串格式化 d3.format
  • 将数字转化成指定格式的字符串。转化的格式非常丰富,且非常智能。
    d3.formatPrefix – 以指定的值和精度获得一个[SI
    prefix]对象。这个函数可用来自动判断数据的量级, 如K等等。示例: var
    prefix = d3.formatPrefix; console.log; // “G”; console.log; // 1.21
    d3.requote – 将字符串转义成可在正则表达式中使用的格式。如 d3.requote; //
    return “\$” d3.round –
    设置某个数按小数点后多少位取整。与toFixed()类似,但返回格式为number。 如
    d3.round; // return 1; d3.round; // return 1.2; d3.round; // return
    1.3CSV 格式化 d3.csv – 获取一个CSV (comma-separated values,
    冒号分隔值)文件。 d3.csv.parse –
    将CSV文件字符串转化成object的数组,object的key由第一行决定。如:
    [{“Year”: “1997”, “Length”: “2.34”}, {“Year”: “2000”, “Length”:
    “2.38”}] d3.csv.parseRows – 将CSV文件字符串转化成数组的数组。如: [
    [“Year”, “Length”],[“1997”, “2.34”],[“2000”, “2.38”] ]
    d3.csv.format –
    将object的数组转化成CSV文件字符串,是d3.csv.parse的逆操作。
    d3.csv.formatRows –
    将数组的数组转化成CSV文件字符串,是d3.csv.parseRows的逆操作。 d3.tsv –
    获取一个TSV (tab-separated values, tab分隔值)文件。 d3.tsv.parse –
    类似于d3.csv.parse。 d3.tsv.parseRows – 类似于d3.csv.parseRows。
    d3.tsv.format – 类似于d3.csv.format。 d3.tsv.formatRows –
    类似于d3.csv.formatRows。 d3.dsv –
    创建一个类似于d3.csv的文件处理对象,可以自定义分隔符和mime type。如:var
    dsv = d3.dsv;颜色 d3.rgb –
    指定一种颜色,创建一个RGB颜色对象。支持多种颜色格式的输入。 rgb.brighter
  • 增强颜色的亮度,变化幅度由参数决定。 rgb.darker –
    减弱颜色的亮度,变化幅度由参数决定。 rgb.hsl –
    将RGB颜色对象转化成HSL颜色对象。 rgb.toString –
    RGB颜色转化为字符串格式。 d3.hsl –
    创建一个HSL颜色对象。支持多种颜色格式的输入。 hsl.brighter –
    增强颜色的亮度,变化幅度由参数决定。 hsl.darker –
    减弱颜色的亮度,变化幅度由参数决定。 hsl.rgb –
    将HSL颜色对象转化成RGB颜色对象。 hsl.toString –
    HSL颜色转化为字符串格式。 d3.lab –
    创建一个Lab颜色对象。支持多种颜色格式的输入。 lab.brighter –
    增强颜色的亮度,变化幅度由参数决定。 lab.darker –
    减弱颜色的亮度,变化幅度由参数决定。 lab.rgb –
    将Lab颜色对象转化成RGB颜色对象。 lab.toString –
    Lab颜色转化为字符串格式。 d3.hcl –
    创建一个HCL颜色对象。支持多种颜色格式的输入。 hcl.brighter –
    增强颜色的亮度,变化幅度由参数决定。 hcl.darker –
    减弱颜色的亮度,变化幅度由参数决定。 hcl.rgb –
    将HCL颜色对象转化成RGB颜色对象。 hcl.toString –
    HCL颜色转化为字符串格式。命名空间 d3.ns.prefix –
    获取或扩展已知的XML命名空间。 d3.ns.qualify – 验证命名空间前缀是否存在,
    如”xlink:href”中xlink是已知的命名空间。内部方法 d3.functor –
    函数化。将非函数变量转化为只返回该变量值的函数。输入函数,则返回原函数;输入值,则返回一个函数,该函数只返回原值。
    d3.rebind – 将一个对象的方法绑定到另一个对象上。 d3.dispatch –
    创建一个定制的事件。 dispatch.on –
    添加或移除一个事件监听器。对一个事件可添加多个监听器。 dispatch.type –
    触发事件。其中‘type’为要触发的事件的名称。d3.scale定量变换
    d3.scale.linear – 创建一个线性定量变换。 linear –
    输入一个定义域的值,返回一个值域的值。 linear.invert –
    反变换,输入值域值返回定义域值。 linear.domain – get或set定义域。
    linear.range – get或set值域。 linear.rangeRound –
    设置值域,并对结果取整。 linear.interpolate –
    get或set变换的插值函数,如将默认的线性插值函数替换成取整的线性插值函数d3_interpolateRound。
    linear.clamp –
    设置值域是否闭合,默认不闭合。当值域闭合时,如果插值结果在值域之外,会取值域的边界值。如值域为[1,
    2],插值函数的计算结果为3,如果不闭合,最终结果为3;如果闭合,最终结果为2。
    linear.nice – 扩展定义域范围使定义域更规整。如[0.20147987687960267,
    0.996679553296417] 变成 [0.2, 1]。 linear.ticks –
    从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。 linear.tickFormat
  • 获取格式转化函数,通常用于坐标轴刻度的格式转化。如:var x =
    d3.scale.linear; console.log.map)); // [“-100%”, “-50%”, “+0%”, “+50%”,
    “+100%”] linear.copy – 从已有的变换中复制出一个变换。 d3.scale.sqrt –
    创建一个求平方根的定量转换。 d3.scale.pow – 创建一个指数变换。 pow –
    输入一个定义域的值,返回一个值域的值。 pow.invert –
    反变换,输入值域值返回定义域值。 pow.domain – get或set定义域。 pow.range
  • get或set值域。 pow.rangeRound – 设置值域,并对结果取整。
    pow.interpolate – get或set变换的插值函数。 pow.clamp –
    设置值域是否闭合,默认不闭合。 pow.nice – 扩展定义域范围使定义域更规整。
    pow.ticks – 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
    pow.tickFormat – 获取格式转化函数,通常用于坐标轴刻度的格式转化。
    pow.exponent – get或set指数的幂次。默认为1次幂。 pow.copy –
    从已有的变换中复制出一个变换。 d3.scale.log – 创建一个对数变换。 log –
    输入一个定义域的值,返回一个值域的值。 log.invert –
    反变换,输入值域值返回定义域值。 log.domain – get或set定义域。 log.range
  • get或set值域。 log.rangeRound – 设置值域,并对结果取整。
    log.interpolate – get或set变换的插值函数。 log.clamp –
    设置值域是否闭合,默认不闭合。 log.nice – 扩展定义域范围使定义域更规整。
    log.ticks – 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
    log.tickFormat – 获取格式转化函数,通常用于坐标轴刻度的格式转化。
    log.copy – 从已有的变换中复制出一个变换。 d3.scale.quantize –
    创建一个quantize线性变换,定义域为一个数值区间,值域为几个离散值。
    quantize – 输入数值,返回离散值。如: var q = d3.scale.quantize.range;
    //q === ‘b’, q ===’c; quantize.invertExtent –
    返回得到某个离散值的值域范围。 // q.invertExtent 的结果为 [0,
    0.3333333333333333] quantize.domain – get或set变换的定义域。
    quantize.range – get或set变换的值域。 quantize.copy –
    从已有的变换中复制出一个变换。 d3.scale.threshold –
    构建一个threshold线性变换。定义域为分隔值数值序列,值域为离散值。它与quantize的区别是quantize指定的值域为一个区间,然后均分这个区间为多个小区间,以对应各离散值。threshold则指定各小区间的边界分隔值。示例:
    var t = d3.scale.threshold.range; t === ‘b’; t === ‘c’; t === ‘c’;
    t.invertExtent; //returns [undefined, 0] t.invertExtent; //returns
    [0, 1] t.invertExtent; //returns [1, undefined] threshold –
    输入数值,返回离散值。 threshold.invertExtent – 输入离散值,返回数值。
    threshold.domain – get或set变换的定义域。 threshold.range –
    get或set变换的值域。 threshold.copy – 从已有的变换中复制出一个变换。
    d3.scale.quantile –
    构建一个quantile线性变换。使用方法与quantize完全类似,区别是quantile根据中位数来分隔区间,quantize根据算数平均值来分隔区间。example
    quantile – 输入数值,返回离散值。 quantile.invertExtent –
    输入离散值,返回数值。 quantile.domain – get或set变换的定义域。
    quantile.range – get或set变换的值域。 quantile.quantiles –
    获得quantile变换的分隔值。示例: var q = d3.scale.quantile.range;
    q.quantiles() returns [0.33333333333333326, 0.6666666666666665]
    quantile.copy – 从已有的变换中复制出一个变换。 d3.scale.identity –
    构建一个identity线性变换。特殊的linear线性变换,此变换定义域和值域相同,只在一些d3内部的axis或brush模块中用到。
    identity – identity线性变换函数。返回输入值。 identity.invert –
    和identity函数相同,返回输入值。 identity.domain –
    get或set变换的定义域。 identity.range – get或set变换的值域。
    identity.ticks – 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
    identity.tickFormat – 获取格式转化函数,通常用于坐标轴刻度的格式转化。

    identity.copy – 从已有的变换中复制出一个变换。序数变换 d3.scale.ordinal

    构建一个ordinal变换对象。ordinal变换的输入定义域和输出值域都是离散的。而quantitative变换的输入定义域是连续的,这是两者最大的不同。
    ordinal –
    输入一个离散值,返回一个离散值。不在当前定义域中的输入值会自动加入定义域。
    ordinal.domain – get或set变换的定义域。 ordinal.range –
    get或set变换的值域。 ordinal.rangePoints –
    用几个离散点来分割一个连续的区间。详情请看链接中的图例。
    ordinal.rangeBands –
    用几个离散区间来分割一个连续的区间。详情请看链接中的图例。
    ordinal.rangeRoundBands –
    用几个离散区间来分割一个连续的区间,区间边界和宽度会取整。详情请看链接中的图例。
    ordinal.rangeBand – 获取离散区间的宽度。 ordinal.rangeExtent –
    获取输出域的最小最大值。 ordinal.copy – 从已有的变换中复制出一个变换。
    d3.scale.category10 – 用10种颜色构建一个ordinal变换。
    d3.scale.category20 – 用20种颜色构建一个ordinal变换。
    d3.scale.category20b – 用另外20种颜色构建一个ordinal变换。
    d3.scale.category20c – 用另外20种颜色构建一个ordinal变换。d3.svg Shapes
    d3.svg.line – 创建一个线段生成器. line – 在折线图里生成一段折线. line.x

  • 设置或获取x轴访问器. line.y – 设置或获取y轴访问器 line.interpolate
  • 设置或获取插值模式. line.tension – 获取或设置曲线张力访问器(cardinal
    spline tension). line.defined – 定义线条在某一点是否存在.
    d3.svg.line.radial – 创建辐射线生成器. line –
    生成分段的线性曲线,用于纬度线/雷达线图表. line.radius –
    获取或设置radius访问器. line.angle – 获取或设置angle访问器.
    line.defined – 设置或获取线条定义存取器. d3.svg.area –
    创建一个新的区域生成器. area – 生成一个线性的区域,用于区域图表. area.x –
    获取或设置x坐标的访问器. area.x0 – 获取或设置x0坐标的访问器. area.x1
  • 获取或设置x1坐标的访问器. area.y – 获取或设置y坐标的访问器.
    area.y0 – 获取或设置y0坐标的访问器. area.y1 –
    获取或设置y1坐标的访问器. area.interpolate – 获取或设置插值模式.
    area.tension – 获取或设置张力访问器(the cardinal spline tension).
    area.defined – 判断获取或定义区域定义存取器. d3.svg.area.radial –
    创建新的区域生成器. area – 生成分段的线性区域,用于纬度/雷达图表.
    area.radius – 获取或设置radius访问器. area.innerRadius –
    获取或设置内部的radius访问器. area.outerRadius –
    获取或设置外部的radius访问器. area.angle – 获取或设置angle访问器.
    area.startAngle – 获取或设置内部的angle访问器. area.endAngle –
    获取或设置外部的angle访问器. area.defined –
    判断获取或定义区域定义存取器. d3.svg.arc – 创建弧度生成器. arc –
    生成一个线性弧度,用于饼图或甜甜圈图. arc.innerRadius –
    获取或设置内部的半径访问器. arc.outerRadius –
    获取或设置外部的半径访问器. arc.startAngle – 获取或设置起始角度访问器.
    arc.endAngle – 获取或设置结束角度访问器. arc.centroid – 计算弧的重心点.
    d3.svg.symbol – 创建符号生成器. symbol – 生成指定的符号,用于散列图.
    symbol.type – 获取或设置符号类型访问器. symbol.size – 获取或设置符号尺寸
    访问器. d3.svg.symbolTypes – 被支持的符号类型数组. d3.svg.chord –
    创建新的弦生成器. chord – 生成一个二次贝塞尔曲线连接两个弧, 用于弦图.
    chord.radius – 获取或设置弧半径访问器. chord.startAngle –
    获取或设置弧起始角度访问器. chord.endAngle – 获取或设置弧结束角度访问器.
    chord.source – 获取或设置源弧度访问器. chord.target –
    获取或设置目标弧度访问器. d3.svg.diagonal – 创建新的斜线生成器. diagonal
  • 生成一个二维贝塞尔连接器, 用于节点连接图. diagonal.source –
    获取或设置源点访问器. diagonal.target – 获取或设置目标点访问器.
    diagonal.projection – 获取或设置一个可选的点变换器.
    d3.svg.diagonal.radial – 创建一个新的斜线生成器. diagonal –
    创建一个二维贝塞尔连接器,用于节点连接图.坐标轴 d3.svg.axis –
    创建一个axis生成器。 axis – 正式在页面中生成axis。 axis.scale –
    get或set坐标轴的scale尺度变换,该尺度变换设定了数值和像素位置的转换规则。
    axis.orient – get或set坐标轴刻度方向。 axis.ticks –
    控制坐标轴刻度的产生方式。 axis.tickValues – 设置特定的坐标轴的值。
    axis.tickSize – 指定坐标轴上刻度线的像素长度。 axis.innerTickSize –
    get或set坐标轴小刻度线的像素长度。 axis.outerTickSize –
    get或set坐标轴大刻度线的像素长度。 axis.tickPadding –
    指定坐标轴刻度和刻度文字之间的像素距离。 axis.tickFormat –
    设置刻度文字的格式。Controls d3.svg.brush – 点击拖拽选择一个二维区域。
    brush – 在页面中某个区域中正式绑定一个brush。 brush.x – get或set
    brush的x变换,用于水平方向的拖拽。 brush.y – get或set
    brush的y变换,用于垂直方向的拖拽。 brush.extent – get或set
    brush的选取范围。 brush.clear – 设置brush的选取范围为空。 brush.empty –
    判断brush的选取范围是否为空。 brush.on – get或set
    brush的事件监听器。可监听3种事件:brushstart, brush, brushend。
    brush.event – 通过程序触发监听事件,在通过程序设置extent后使用。d3.time
    时间格式转换 d3.time.format – 创建基于某种时间格式的本地时间格式转换器。
    format – 将一个date对象转换成特定时间格式的字符串。 format.parse –
    将特定时间格式的字符串转换成date对象。 d3.time.format.utc –
    创建基于某种时间格式的世界标准时间格式转换器。 d3.time.format.iso –

    创建基于某种时间格式的ISO世界标准时间格式转换器。时间变换 d3.time.scale

    创建一个线性时间变换,定义域为数值区间,值域为时间区间。常用于时间坐标轴的创建。详情可参考d3.scale.linear。
    scale – 输入为一个数值,返回为一个时间。 scale.invert –
    反变换,输入时间返回数值。 scale.domain – get或set变换的定义域。
    scale.nice – 扩展定义域范围使定义域更规整。 scale.range –
    get或set变换的值域。 scale.rangeRound – 设置值域,并对结果取整。
    scale.interpolate –
    get或set变换的插值函数,如将默认的线性插值函数替换成指数插值函数。
    scale.clamp –
    设置值域是否闭合,默认不闭合。当值域闭合时,如果插值结果在值域之外,会取值域的边界值。详情参考linear.clamp。
    scale.ticks – 从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。
    scale.tickFormat – 获取格式转化函数,通常用于坐标轴刻度的格式转化。
    scale.copy – 从已有的时间变换中复制出一个变换。Time Intervals
    d3.time.interval – 返回一个对于本地时间时间间隔器. interval –
    效果同interval.floor方法. interval.range – 返回指定区间内日期.
    interval.floor – 下舍入到最近的间隔值. interval.round –
    上舍入或下舍入到最近的间隔值. interval.ceil – 上舍入到最近的间隔值.
    interval.offset – 返回指定时间间隔的日期偏移量. interval.utc –
    返回对应的UTC时间间隔. d3.time.day – 返回指定时间基于天起始的时间.
    d3.time.days –
    返回指定时间区间和间隔条件的基于天的所有时间,效果同day.range.
    d3.time.dayOfYear – 计算指定时间在年中的天数. d3.time.hour –
    返回指定时间基于小时起始的时间. d3.time.hours –
    返回指定时间区间和间隔条件的基于小时的所有时间, 效果同hour.range.
    d3.time.minute – 返回指定时间基于分钟起始的时间 . d3.time.minutes –
    返回指定时间区间和间隔条件的基于分钟的所有时间,效果同minute.range.
    d3.time.month – 返回指定时间基于月起始的时间(e.g., February 1, 12:00
    AM). d3.time.months –
    返回指定时间区间和间隔条件的基于月的所有时间,效果同month.range.
    d3.time.second – 返回指定时间基于秒起始的时间. d3.time.seconds –
    返回指定时间区间和间隔条件的基于秒的所有时间,效果同second.range.
    d3.time.sunday – 返回指定时间基于Sunday起始的时间(e.g., February 5,
    12:00 AM). d3.time.sundays –
    返回指定时间区间和间隔条件的基于sunday的所有时间, 效果同sunday.range.
    d3.time.sundayOfYear – 计算以sunday为基点的指定时间在一年中的周数.
    d3.time.monday – every Monday (e.g., February 5, 12:00 AM).
    d3.time.mondays – alias for monday.range. d3.time.mondayOfYear –
    computes the monday-based week number. d3.time.tuesday – every Tuesday
    (e.g., February 5, 12:00 AM). d3.time.tuesdays – alias for
    tuesday.range. d3.time.tuesdayOfYear – computes the tuesday-based week
    number. d3.time.wednesday – every Wednesday (e.g., February 5, 12:00
    AM). d3.time.wednesdays – alias for wednesday.range.
    d3.time.wednesdayOfYear – computes the wednesday-based week number.
    d3.time.thursday – every Thursday (e.g., February 5, 12:00 AM).
    d3.time.thursdays – alias for thursday.range. d3.time.thursdayOfYear –
    computes the thursday-based week number. d3.time.friday – every Friday
    (e.g., February 5, 12:00 AM). d3.time.fridays – alias for friday.range.
    d3.time.fridayOfYear – computes the friday-based week number.
    d3.time.saturday – every Saturday (e.g., February 5, 12:00 AM).
    d3.time.saturdays – alias for saturday.range. d3.time.saturdayOfYear –
    computes the saturday-based week number. d3.time.week – alias for
    sunday. d3.time.weeks – alias for sunday.range. d3.time.weekOfYear –
    alias for sundayOfYear. d3.time.year –
    返回指定时间基于年起始的时间(e.g., January 1, 12:00 AM). d3.time.years –
    返回指定时间区间和间隔条件的所有时间,效果同year.range.构图Bundle
    d3.layout.bundle – construct a new default bundle layout. bundle – apply
    Holten’s hierarchical bundling algorithm to edges.弦图 d3.layout.chord

  • 初始化一个弦图对象, 返回一个 Chord 实例 chord.matrix –
    设置或者获取弦图实例对应的矩阵数据 chord.padding –
    设置或获取弦图各段圆弧之间的间隔角度 chord.sortGroups –
    设置或获取矩阵分组的排序函数 chord.sortSubgroups –
    设置或获取矩阵二级分组的排序函数 chord.sortChords –
    设置或获取弦图在z序上的排序函数 chord.chords – 该函数会将参数处理成对
    chord 更友好的格式并返回, 若没有提供参数, 会调用matrix()来获取数据
    chord.groups – 该函数参数处理成更易于理解的分组信息, 若没有提供参数,
    会调用matrix d3.layout.cluster – 用默认设置生成一个集群布局对象.
    cluster.sort – 获取或设置一个函数, 用来给兄弟节点的排序.
    cluster.children – 获取或设置子结点的访问器. cluster.nodes –
    计算并返回指定结点的子结点在集群中的信息. cluster.links –
    指定一个子结点数组(通常是nodes函数返回值),
    计算它们与父结点的连接信息. cluster.separation –
    获取或设置相邻结点间的间隔. cluster.size – 获取或设置布局的
    的大小. cluster.nodeSize – 为结点指定大小.力学 d3.layout.force
    -节点基于物理模拟的位置连接。 force.on –
    监听布局位置的变化。(仅支持”start”,”step”,”end”三种事件) force.nodes –
    获得或设置布局中的节点阵列组。 force.links –
    获得或设置布局中节点间的连接阵列组。. force.size – 获取或设置布局的
    的大小. force.linkDistance – 获取或设置节点间的连接线距离.
    force.linkStrength – 获取或设置节点间的连接强度. force.friction –
    获取或设置摩擦系数. force.charge – 获取或设置节点的电荷数. force.gravity
  • 获取或设置节点的引力强度. force.theta –
    获取或设置电荷间互相作用的强度. force.start –
    开启或恢复结点间的位置影响. force.resume –
    设置冷却系数为0.1,并重新调用start()函数. force.stop –
    立刻终止结点间的位置影响.(等同于将冷却系数设置为0) force.alpha –
    获取或设置布局的冷却系数. force.tick – 让布局运行到下一步. force.drag –
    获取当前布局的拖拽对象实例以便进一步绑定处理函数.层级布局
    d3.layout.hierarchy – 获得一个自定义的层级布局的实现. hierarchy.sort –
    获取或设置一个函数, 用来给兄弟节点的排序. hierarchy.children –
    获取或设置子结点的访问器. hierarchy.nodes –
    计算并返回指定结点的子结点信息. hierarchy.links –
    指定一个子结点数组(通常是nodes函数返回值),
    计算它们与父结点的连接信息. hierarchy.value –
    获取或设置结点的访问器. hierarchy.revalue –
    重新计算层级布局.直方图 d3.layout.histogram –
    构建一个默认直方图(用来表示一组离散数字的分布,横轴表示区间,纵轴表示区间内样本数量或样本百分比).
    histogram.value – 获取或设置值访问器. histogram.range –
    获取或设置合法值范围. histogram.bins – 指定如何将数据分组到不同的区间里,
    返回一个构造函数 . histogram –
    根据已设置的区间将数据分组,返回已分组的二维数组(compute the distribution
    of data using quantized bins). histogram.frequency –
    设置直方图Y轴值是区间内数据的总量还是百分比(compute the distribution as
    counts or probabilities).层包 d3.layout.pack –
    用递归的圆环表现一个多层级布局. pack.sort – 获取或设置一个函数,
    用来给兄弟节点排序. pack.children – 获取或设置子结点的访问器. pack.nodes
  • 计算并返回指定结点的子结点信息. pack.links –
    指定一个子结点数组(通常是nodes函数返回值),
    计算它们与父结点的连接信息. pack.value – 获取或设置一个函数,
    用来计算圆环的大小. pack.size – 设置整个布局画布的 and .
    pack.radius – 如果不想结点半径与结点的值相同,
    可以传入一个函数用来计算结点半径. pack.padding – 指定相邻结点之点的间距
    d3.layout.partition – 将一棵树递归的分区. partition.sort –
    获取或设置一个函数, 用来给兄弟节点排序. partition.children –
    获取或设置子结点的访问器. partition.nodes –
    计算并返回指定结点的子结点信息. partition.links –
    指定一个子结点数组(通常是nodes函数返回值),
    计算它们与父结点的连接信息. partition.value –
    设置一个函数来来计算分区的值. partition.size – 设置整个布局画布的
    and .饼图 d3.layout.pie – 构建一个默认的饼图. pie –
    该函数将传入的原始参数转换成可用于饼图或者环形图的数据结构. pie.value –
    获取或设置值访问器. pie.sort – 设置饼图顺时针方向的排序方法.
    pie.startAngle – 设置或获取整个饼图的起始角度. pie.endAngle –
    设置或获取整个饼图的终止角度.堆叠图 d3.layout.stack –
    构建一个默认的堆叠图. stack – 计算每一层的基线. stack.values –
    设置或者获取每层的值访问器. stack.order – 设置每层的排序. stack.offset –
    指定总的基线算法. stack.x – 设置或获取每层的x轴访问器. stack.y –
    设置或获取每层的y轴访问器. stack.out –
    设置或获取用来储存基线的输出函数.树 d3.layout.tree – position a tree of
    nodes tidily. tree.sort – 设置或获取一个函数, 用来给兄弟节点排序.
    tree.children – 设置或获取子结点的访问器. tree.nodes –
    计算并返回指定结点的子结点信息. tree.links –
    指定一个子结点数组(通常是nodes函数返回值),
    计算它们与父结点的连接信息. tree.separation –
    设置或获取相隔结点之间的间隔计算函数. tree.size – 指定整个布局的宽和高.
    tree.nodeSize – 给全部结点指定一个固定的大小.矩阵树 d3.layout.treemap –
    返回一个矩阵树对象. treemap.sort – 设置或获取一个函数,
    用来给兄弟节点排序. treemap.children – 设置或获取子结点的访问器.
    treemap.nodes – 计算并返回指定结点的子结点信息. treemap.links –
    指定一个子结点数组(通常是nodes函数返回值),
    计算它们与父结点的连接信息. treemap.value –
    设置或获取一个用来计算单元格大小的值访问器. treemap.size –
    指定整个布局的宽和高. treemap.padding – 指定父结点和子结点的间距.
    treemap.round – 禁用或启用边界补偿. treemap.sticky –
    让布局更”粘”以保证在更新数据时有平滑的动画效果. treemap.mode –
    更改矩阵树的布局算法.d3.geo Paths d3.geo.path –
    创建一个新的地理路径生成器. path – 投射指定的特性并且渲染到上下文.
    path.projection – 获取活设置地理投影. path.context –
    获取活设置渲染上下文. path.pointRadius -获取或设置半径去现实点的特性.
    path.area – 计算指定特性的投射区域. path.centroid –
    计算指定特性的投射重心点. path.bounds – 计算指定特性的投射边界.
    d3.geo.graticule – 创建地理坐标网生成器. graticule –
    生产一个子午线或平行线的MultiLineStrings. graticule.lines –
    生成一个子午线和平行线的LineString的数组. graticule.outline –
    生成一个表示该坐标网的外框多边形. graticule.extent –
    获取或设置主要的和次要的范围. graticule.majorExtent –
    获取或设置主要范围. graticule.minorExtent – 获取或设置次要范围.
    graticule.step – 获取或设置主要和次要的步间隔. graticule.majorStep –
    获取或设置主要的步间隔. graticule.minorStep – 获取或设置次要的步间隔.
    graticule.precision – 设置或者获取横向精度. d3.geo.circle –
    创建一个圆形的生成器. circle – 使用多边形来生成一个分段的圆形.
    circle.origin – 通过横向和纵向坐标来指定原点. circle.angle –
    指定以度为单位的角半径. circle.precision – 指定分段圆的精度. d3.geo.area
  • 根据给定特征计算球面面积. d3.geo.bounds – compute the
    latitude-longitude bounding box for a given feature. d3.geo.centroid –
    compute the spherical centroid of a given feature. d3.geo.distance –
    compute the great-arc distance between two points. d3.geo.interpolate –
    interpolate between two points along a great arc. d3.geo.length –
    compute the length of a line string or the circumference of a polygon.
    d3.geo.rotation – create a rotation function for the specified angles
    [λ, φ, γ]. rotation – rotate the given location around the sphere.
    rotation.invert – inverse-rotate the given location around the
    sphere.Projections d3.geo.projection – create a standard projection from
    a raw projection. projection – project the specified location.
    projection.invert – invert the projection for the specified point.
    projection.rotate – get or set the projection’s three-axis rotation.
    projection.center – get or set the projection’s center location.
    projection.translate – get or set the projection’s translation position.
    projection.scale – get or set the projection’s scale factor.
    projection.clipAngle – get or set the radius of the projection’s clip
    circle. projection.clipExtent – get or set the projection’s viewport
    clip extent, in pixels. projection.precision – get or set the precision
    threshold for adaptive resampling. projection.stream – wrap the
    specified stream listener, projecting input geometry.
    d3.geo.projectionMutator – create a standard projection from a mutable
    raw projection. d3.geo.albers – the Albers equal-area conic projection.
    albers.parallels – get or set the projection’s two standard parallels.
    d3.geo.albersUsa – a composite Albers projection for the United States.
    d3.geo.azimuthalEqualArea – the azimuthal equal-area projection.
    d3.geo.azimuthalEquidistant – the azimuthal equidistant projection.
    d3.geo.conicConformal – the conic conformal projection.
    d3.geo.conicEquidistant – the conic equidistant projection.
    d3.geo.conicEqualArea the conic equal-area projection.
    d3.geo.equirectangular – the equirectangular projection. d3.geo.gnomonic
  • the gnomonic projection. d3.geo.mercator – the spherical Mercator
    projection. d3.geo.orthographic – the azimuthal orthographic projection.
    d3.geo.stereographic – the azimuthal stereographic projection.
    d3.geo.azimuthalEqualArea.raw – the raw azimuthal equal-area projection.
    d3.geo.azimuthalEquidistant.raw – the azimuthal equidistant projection.
    d3.geo.conicConformal.raw – the raw conic conformal projection.
    d3.geo.conicEquidistant.raw – the raw conic equidistant projection.
    d3.geo.conicEqualArea.raw the raw conic equal-area projection.
    d3.geo.equirectangular.raw – the raw equirectangular projection.
    d3.geo.gnomonic.raw – the raw gnomonic projection. d3.geo.mercator.raw –
    the raw Mercator projection. d3.geo.orthographic.raw – the raw azimuthal
    orthographic projection. d3.geo.stereographic.raw – the raw azimuthal
    stereographic projection. d3.geo.transverseMercator.raw – the raw
    transverse Mercator projection.Streams d3.geo.stream – convert a GeoJSON
    object to a geometry stream. stream.point – indicate an x, y (and
    optionally z) coordinate. stream.lineStart – indicate the start of a
    line or ring. stream.lineEnd – indicate the end of a line or ring.
    stream.polygonStart – indicate the start of a polygon. stream.polygonEnd
  • indicate the end of a polygon. stream.sphere – indicate a sphere.
    d3.geo.transform – transform streaming geometries. transform.stream –
    wraps a given stream. d3.geo.clipExtent – a stream transform that clips
    geometries to a given axis-aligned rectangle. clipExtent.extent – sets
    the clip extent.d3.geom Voronoi d3.geom.voronoi – create a Voronoi
    layout with default accessors. voronoi – compute the Voronoi
    tessellation for the specified points. voronoi.x – get or set the
    x-coordinate accessor for each point. voronoi.y – get or set the
    y-coordinate accessor for each point. voronoi.clipExent – get or set the
    clip extent for the tesselation. voronoi.links – compute the Delaunay
    mesh as a network of links. voronoi.triangles – compute the Delaunay
    mesh as a triangular tessellation.Quadtree d3.geom.quadtree – constructs
    a quadtree for an array of points. quadtree.add – add a point to the
    quadtree. quadtree.visit – recursively visit nodes in the
    quadtree.Polygon d3.geom.polygon – create a polygon from the specified
    array of points. polygon.area – compute the counterclockwise area of
    this polygon. polygon.centroid – compute the area centroid of this
    polygon. polygon.clip – clip the specified polygon to this polygon.Hull
    d3.geom.hull – create a convex hull layout with default accessors. hull
  • compute the convex hull for the given array of points. hull.x – get or
    set the x-coordinate accessor. hull.y – get or set the y-coordinate
    accessor.d3.behavior Drag d3.behavior.drag drag.origin drag.on缩放 Zoom
    d3.behavior.zoom – 创建一个缩放行为. zoom – 对指定元素应用缩放.
    zoom.scale – the current scale factor. zoom.translate – the current
    translate offset. zoom.scaleExtent – optional limits on the scale
    factor. zoom.center – an optional focal point for mousewheel zooming.
    zoom.size – the dimensions of the viewport. zoom.x – an optional scale
    whose domain is bound to the x extent of the viewport. zoom.y – an
    optional scale whose domain is bound to the y extent of the viewport.
    zoom.on – listeners for when the scale or translate changes. zoom.event
  • dispatch zoom events after setting the scale or translate.

d3.js的API

selection.style – 设置或删除 CSS 属性。style优先级高于attr。

选择集

  • d3.select –
    从当前文档中选择一系列元素。

  • d3.selectAll –
    从当前文档中选择多项元素。

  • selection.attr –
    设置或获取指定属性。

  • selection.classed –
    添加或删除选定元素的 CSS 类(CSS class)。

  • selection.style –
    设置或删除 CSS 属性。style优先级高于attr。

  • selection.property –
    设置或获原生的属性值(raw property)。

  • selection.text –
    设置或获取选定元素的标签体文本内容。

  • selection.html –
    设置或获取选定元素的 HTML 内容(类似 innerHTML )

  • selection.append –
    创建并添加新元素到选定元素后。

  • selection.insert –
    创建并添加新元素到选定元素前。

  • selection.remove –
    从当前文档对象中删除选定的元素。

  • selection.data –
    设置或获取一组元素的绑定数据(get or set data for a group of
    elements, while computing a relational join.)

  • selection.enter –
    返回缺失元素的占位对象(placeholder),指向绑定的数据中比选定元素集多出的一部分元素。

  • selection.exit –
    返回多余元素的元素集,即选择元素中比绑定数据多出的一部分。(关于data,
    enter,
    exit原理的示例1, 示例2, 示例3)

  • selection.datum –
    设置或获取单独元素的数据,不进行关联。(get or set data for
    individual elements, without computing a join.)

  • selection.filter –
    根据绑定的数据过滤选择集。

  • selection.sort –
    根据绑定的数据对选择的元素进行排序。

  • selection.order –
    对文档中的元素重排序以匹配选择集。

  • selection.on –
    添加或删除事件监听器。

  • selection.transition –
    启动一个过渡效果(返回 Transition 对象),可以理解为动画。

  • selection.interrupt –
    立即停止所有正在进行的动画动作。

  • selection.each –
    为每个选择的元素集调用指定的函数。

  • selection.call –
    为当前选择的元素集调用指定的函数。

  • selection.empty – 测试选择集是否为空。

  • selection.node –
    返回选择集中的第一个元素。

  • selection.size –
    返回选择集中的元素个数。

  • selection.select –
    选择所选的元素中的第一个子元素组成新的选择集。

  • selection.selectAll –
    选择所选的元素中的多个子元素组成新的选择集。

  • d3.selection –
    选择集对象原型(可通过 d3.selection.prototype 为选择集增强功能)。

  • d3.event –
    获取当前交互的用户事件。

  • d3.mouse –
    获取鼠标的相对某元素的坐标。

  • d3.touches –
    获取相对某元素的触控点坐标。

selection.property – 设置或获原生的属性值(raw property)。
selection.text – 设置或获取选定元素的标签体文本内容。
selection.html – 设置或获取选定元素的 HTML 内容(类似 innerHTML )
selection.append – 创建并加入新元素到选定元素后。

var ordinal = d3.scale.ordinal()
                .domain([1,2,3,4,5])
                .rangePoints([0,100]);

console.log( ordinal.range() );          //输出[0,25,50,75,100]
console.log( ordinal(1) );                 //输出0
console.log( ordinal(3) );                 //输出50
console.log( ordinal(5) );                 //输出100
//计算见下图
ordinal.rangePoints([0,100],5);
console.log( ordinal.range() );        //输出[27.77,38.88,50,61.11,72.22]

ordinal.rangeRoundPoints([0,100],5);   
console.log( ordinal.range() );        //输出[28,39,50,61,72]

var bands = d3.scale.ordinal()
                .domain([1,2,3,4,5])
                .rangeBands([0,100]);
//计算见下图
console.log( bands.range() );           //输出[0,20,40,60,80]
console.log( bands.rangeBand() );       //输出20

bands.rangeBands([0,100],0.5,0.2);
console.log( bands.range() );           //输出[4.081632653061225,24.489795918367346,44.89795918367347,65.3061224489796,85.71428571428571]
console.log( bands.rangeBand() );       //输出10.204081632653061

过渡效果

  • d3.transition –
    开始一个动画过渡。简单教程

  • transition.delay –
    指定每个元素过渡的延迟时间(单位:毫秒ms)。

  • transition.duration –
    指定每个元素过渡的持续时间(单位:毫秒ms)。

  • transition.ease –
    指定过渡的缓冲函数。

  • transition.attr –
    平滑过渡到新的attr属性值(起始属性值为当前属性)。

  • transition.attrTween –
    在不同attr属性值之间平滑过渡(起始属性值可在过渡函数中设置,甚至整个过渡函数都可以自定义)。

  • transition.style –
    平滑过渡到新的style属性值。

  • transition.styleTween –
    在不同style属性值之间平滑过渡。

  • transition.text –
    在过渡开始时设置文本内容。

  • transition.tween –
    使某个属性过渡到一个新的属性值,该属性可以是非attr或非style属性,比如text。

  • transition.select –
    选择每个当前元素的某个子元素进行过渡。

  • transition.selectAll –
    选择每个当前元素的多个子元素进行过渡。

  • transition.filter –
    通过数据筛选出当前元素中的部分元素进行过渡。

  • transition.transition –
    当前过渡结束后开始新的过渡。

  • transition.remove –
    过渡结束后移除当前元素。

  • transition.empty –
    如果过渡为空就返回true。如果当前元素中没有非null元素,则此过渡为空。

  • transition.node –
    返回过渡中的第一个元素。

  • transition.size –
    返回过渡中当前元素的数量。

  • transition.each –
    遍历每个元素执行操作。不指定触发类型时,立即执行操作。当指定触发类型为’start’或’end’时,会在过渡开始或结束时执行操作。

  • transition.call –
    以当前过渡为this执行某个函数。

  • d3.ease –
    定制过渡的缓冲函数。

  • ease –
    缓冲函数。缓冲函数可让动画效果更自然,比如elastic缓冲函数可用以模拟弹性物体的运动。是一种插值函数的特例。

  • d3.timer –
    开始一个定制的动画计时。功能类似于setTimeout,但内部用requestAnimationFrame实现,更高效。

  • d3.timer.flush –
    立刻执行当前没有延迟的计时。可用于处理闪屏问题。

  • d3.interpolate –
    生成一个插值函数,在两个参数间插值。差值函数的类型会根据输入参数的类型(数字、字符串、颜色等)而自动选择。

  • interpolate –
    插值函数。输入参数在[0, 1]之间。

  • d3.interpolateNumber –
    在两个数字间插值。

  • d3.interpolateRound –
    在两个数字间插值,返回值会四舍五入取整。

  • d3.interpolateString –
    在两个字符串间插值。解析字符串中的数字,对应的数字会插值。

  • d3.interpolateRgb –
    在两个RGB颜色间插值。

  • d3.interpolateHsl –
    在两个HSL颜色间插值。

  • d3.interpolateLab –
    在两个L*a*b*颜色间插值。

  • d3.interpolateHcl –
    在两个HCL颜色间插值。

  • d3.interpolateArray –
    在两个数列间插值。d3.interpolateArray( [0, 1], [1, 10, 100]
    )(0.5); // returns [0.5, 5.5, 100]

  • d3.interpolateObject –
    在两个object间插值。d3.interpolateArray( {x: 0, y: 1}, {x: 1, y: 10,
    z: 100} )(0.5); // returns {x: 0.5, y: 5.5, z: 100}

  • d3.interpolateTransform –
    在两个2D仿射变换间插值。

  • d3.interpolateZoom –
    在两个点之间平滑地缩放平移。示例

  • d3.interpolators –
    添加一个自定义的插值函数.

selection.insert – 创建并加入新元素到选定元素前。
selection.remove – 从当前文档对象中删除选定的元素。
selection.data – 设置或获取一组元素的绑定数据(get or set data for a
group of elements, while computing a relational join.)
selection.enter –
返回缺失元素的占位对象(placeholder),指向绑定的数据中比选定元素集多出的一部分元素。
selection.exit –
返回多余元素的元素集。即选择元素中比绑定数据多出的一部分。(关于data,
enter, exit原理的演示样例1, 演示样例2, 演示样例3)
selection.datum – 设置或获取单独元素的数据,不进行关联。(get or set
data for individual elements, without computing a join.)
selection.filter – 依据绑定的数据过滤选择集。
selection.sort – 依据绑定的数据对选择的元素进行排序。
selection.order – 对文档中的元素重排序以匹配选择集。
selection.on – 加入或删除事件监听器。

step的计算

数据操作(Working with Arrays)

  • d3.ascending –
    升序排序函数.

  • d3.descending –
    降序排序函数.

  • d3.min –
    获取数组中的最小值.

  • d3.max –
    获取数组中的最大值.

  • d3.extent –
    获取数组的范围(最小值和最大值).

  • d3.sum –
    获取数组中数字之和.

  • d3.mean -获取数组中数字的算术平均值.

  • d3.median –
    获取数组中数字的中位数 (相当于 0.5-quantile的值).

  • d3.quantile –
    获取排好序的数组的一个分位数(quantile).

  • d3.bisect –
    通过二分法获取某个数在排好序的数组中的插入位置(同d3.bisectRight).

  • d3.bisectRight –
    获取某个数在排好序的数组中的插入位置(相等的值归入右边).

  • d3.bisectLeft –
    获取某个数在排好序的数组中的插入位置(相等的值归入左边).

  • d3.bisector –
    自定义一个二分函数.

  • d3.shuffle –
    洗牌,随机排列数组中的元素.

  • d3.permute –
    以指定顺序排列数组中的元素.

  • d3.zip –
    将多个数组合并成一个数组的数组,新数组的的第i个元素是原来各个数组中第i个元素组成的数组.

  • d3.transpose –
    矩阵转置,通过d3.zip实现.

  • d3.pairs –
    返回临近元素对的数组,d3.pairs([1, 2, 3, 4]); // returns [ [1,
    2], [2, 3], [3, 4] ].

  • d3.keys –
    返回关联数组(哈希表、json、object对象)的key组成的数组.

  • d3.values –
    返回关联数组的value组成的数组.

  • d3.entries –
    返回关联数组的key-value实体组成的数组, d3.entries({ foo: 42 }); //
    returns [{key: “foo”, value: 42}].

  • d3.merge –
    将多个数组连成一个,类似于原生方法concat. d3.merge([ [1], [2,
    3] ]); // returns [1, 2, 3].

  • d3.range –
    获得一个数列. d3.range([start, ]stop[, step])

  • d3.nest –
    获得一个nest对象,将数组组织成层级结构.
    示例:

  • nest.key –
    为nest层级结构增加一个层级.

  • nest.sortKeys –
    将当前的nest层级结构按key排序.

  • nest.sortValues –
    将叶nest层级按value排序.

  • nest.rollup –
    设置修改叶节点值的函数.

  • nest.map –
    执行nest操作, 返回一个关联数组(json).

  • nest.entries –
    执行nest操作, 返回一个key-value数组. 如果nest.map返回的结果类似于{
    foo: 42 }, 则nest.entries返回的结果类似于[{key: “foo”, value:
    42}].

  • d3.map –
    将JavaScript的object转化为hash,屏蔽了object的原型链功能导致的与hash不一致的问题。

  • map.has –
    map有某个key就返回true.

  • map.get –
    返回map中某个key对应的value.

  • map.set –
    设置map中某个key对应的value.

  • map.remove –
    删除map中的某个key.

  • map.keys –
    返回map中所有key组成的数组.

  • map.values –
    返回map中所有value组成的数组.

  • map.entries –
    返回map中所有entry(key-value键值对)组成的数组.类似于{ foo: 42
    }转化成[{key: “foo”, value: 42}]

  • map.forEach –
    对map中每一个entry执行某个函数.

  • d3.set –
    将javascript的array转化为set,屏蔽了array的object原型链功能导致的与set不一致的问题。set中的value是array中每个值转换成字符串的结果。set中的value是去重过的。

  • set.has –
    返回set中是否含有某个value.

  • set.add –
    添加某个value.

  • set.remove –
    删除某个value.

  • set.values –
    返回set中的值组成的数组.set中的value是去重过的.

  • set.forEach –
    对set中每一个value执行某个函数.

selection.transition – 启动一个过渡效果(返回 Transition
对象)。能够理解为动画。

3522vip靠谱吗 2

Math

  • d3.random.normal –
    利用正态分布产生一个随机数.

  • d3.random.logNormal –
    利用对数正态分布产生一个随机数.

  • d3.random.irwinHall –
    利用Irwin–Hall分布(简单可行并且容易编程的正态分布实现方法)产生一个随机数.

  • d3.transform –
    将svg的tranform格式转化为标准的2D转换矩阵字符串格式.

selection.interrupt – 马上停止全部正在进行的动画动作。
selection.each – 为每一个选择的元素集调用指定的函数。
selection.call – 为当前选择的元素集调用指定的函数。
selection.empty – 測试选择集是否为空。
selection.node – 返回选择集中的第一个元素。
selection.size – 返回选择集中的元素个数。
selection.select – 选择所选的元素中的第一个子元素组成新的选择集。
selection.selectAll – 选择所选的元素中的多个子元素组成新的选择集。

rangePoints中step的计算

载入外部资源(Loading External Resources)

  • d3.xhr –
    发起XMLHttpRequest请求获取资源。

  • xhr.header –
    设置 request header。

  • xhr.mimeType –
    设置 Accept request header,并重写 response MIME type。

  • xhr.response –
    设置response返回值转化函数。如 function(request) { return
    JSON.parse(request.responseText); }

  • xhr.get –
    发起GET请求。

  • xhr.post –
    发起POST请求。

  • xhr.send –
    以指定的方法和数据发起请求。

  • xhr.abort –
    终止当前请求。

  • xhr.on –
    为请求添加”beforesend”, “progress”, “load” 或 “error” 等事件监听器。

  • d3.text –
    请求一个text文件。

  • d3.json –
    请求一个JSON。

  • d3.html –
    请求一个html文本片段。

  • d3.xml –
    请求一个XML文本片段。

  • d3.csv –
    请求一个CSV(comma-separated values, 逗号分隔值)文件。

  • d3.tsv –
    请求一个TSV(tab-separated values, tab分隔值)文件。

d3.selection – 选择集对象原型(可通过 d3.selection.prototype
为选择集增强功能)。

3522vip靠谱吗 3

字符串格式化(String Formatting)

  • d3.format –
    将数字转化成指定格式的字符串。转化的格式非常丰富,且非常智能。

  • d3.formatPrefix –
    以指定的值和精度获得一个[SI
    prefix]对象。这个函数可用来自动判断数据的量级,
    如K(千),M(百万)等等。示例: var prefix = d3.formatPrefix(1.21e9);
    console.log(prefix.symbol); // “G”;
    console.log(prefix.scale(1.21e9)); // 1.21

  • d3.requote –
    将字符串转义成可在正则表达式中使用的格式。如 d3.requote(‘$’); //
    return “\$”

  • d3.round –
    设置某个数按小数点后多少位取整。与toFixed()类似,但返回格式为number。
    如 d3.round(1.23); // return 1; d3.round(1.23, 1); // return 1.2;
    d3.round(1.25, 1); // return 1.3

d3.event – 获取当前交互的用户事件。
d3.mouse – 获取鼠标的相对某元素的坐标。
d3.touches – 获取相对某元素的触控点坐标。
过渡效果
d3.transition – 開始一个动画过渡。简单教程
transition.delay – 指定每一个元素过渡的延迟时间(单位:毫秒ms)。
transition.duration – 指定每一个元素过渡的持续时间(单位:毫秒ms)。
transition.ease – 指定过渡的缓冲函数。

rangeBands中step的计算

CSV 格式化 (d3.csv)

  • d3.csv –
    获取一个CSV (comma-separated values, 冒号分隔值)文件。

  • d3.csv.parse –
    将CSV文件字符串转化成object的数组,object的key由第一行决定。如:
    [{“Year”: “1997”, “Length”: “2.34”}, {“Year”: “2000”, “Length”:
    “2.38”}]

  • d3.csv.parseRows –
    将CSV文件字符串转化成数组的数组。如: [ [“Year”,
    “Length”],[“1997”, “2.34”],[“2000”, “2.38”] ]

  • d3.csv.format –
    将object的数组转化成CSV文件字符串,是d3.csv.parse的逆操作。

  • d3.csv.formatRows –
    将数组的数组转化成CSV文件字符串,是d3.csv.parseRows的逆操作。

  • d3.tsv –
    获取一个TSV (tab-separated values, tab分隔值)文件。

  • d3.tsv.parse –
    类似于d3.csv.parse。

  • d3.tsv.parseRows –
    类似于d3.csv.parseRows。

  • d3.tsv.format –
    类似于d3.csv.format。

  • d3.tsv.formatRows –
    类似于d3.csv.formatRows。

  • d3.dsv –
    创建一个类似于d3.csv的文件处理对象,可以自定义分隔符和mime
    type。如:var dsv = d3.dsv(“|”, “text/plain”);

transition.attr – 平滑过渡到新的attr属性值(起始属性值为当前属性)。
transition.attrTween –
在不同attr属性值之间平滑过渡(起始属性值可在过渡函数中设置,甚至整个过渡函数都能够自己定义)。

获取颜色的序数比例尺

  • d3.scale.category10():10种颜色
  • d3.scale.category20():20种颜色
  • d3.scale.category20b():20种颜色
  • d3.scale.category20c():20种颜色
    卢纶输入值是什么样的离散值,该比例尺都按照颜色顺序返回

var color = d3.scale.category10();

console.log( color(1) );       //输出颜色中的第一个
console.log( color("zhangsan") );      //输出颜色中的第一个

.attr("fill".function(d,i){
    return color(i);          //color是颜色比例尺,i是被绑定数据的索引hao
})

Colors

  • d3.rgb –
    指定一种颜色,创建一个RGB颜色对象。支持多种颜色格式的输入。

  • rgb.brighter –
    增强颜色的亮度,变化幅度由参数决定。

  • rgb.darker –
    减弱颜色的亮度,变化幅度由参数决定。

  • rgb.hsl –
    将RGB颜色对象转化成HSL颜色对象。

  • rgb.toString –
    RGB颜色转化为字符串格式。

  • d3.hsl –
    创建一个HSL颜色对象。支持多种颜色格式的输入。

  • hsl.brighter –
    增强颜色的亮度,变化幅度由参数决定。

  • hsl.darker –
    减弱颜色的亮度,变化幅度由参数决定。

  • hsl.rgb –
    将HSL颜色对象转化成RGB颜色对象。

  • hsl.toString –
    HSL颜色转化为字符串格式。

  • d3.lab –
    创建一个Lab颜色对象。支持多种颜色格式的输入。

  • lab.brighter –
    增强颜色的亮度,变化幅度由参数决定。

  • lab.darker –
    减弱颜色的亮度,变化幅度由参数决定。

  • lab.rgb –
    将Lab颜色对象转化成RGB颜色对象。

  • lab.toString –
    Lab颜色转化为字符串格式。

  • d3.hcl –
    创建一个HCL颜色对象。支持多种颜色格式的输入。

  • hcl.brighter –
    增强颜色的亮度,变化幅度由参数决定。

  • hcl.darker –
    减弱颜色的亮度,变化幅度由参数决定。

  • hcl.rgb –
    将HCL颜色对象转化成RGB颜色对象。

  • hcl.toString –
    HCL颜色转化为字符串格式。

transition.style – 平滑过渡到新的style属性值。
transition.styleTween – 在不同style属性值之间平滑过渡。

命名空间

  • d3.ns.prefix –
    获取或扩展已知的XML命名空间。

  • d3.ns.qualify –
    验证命名空间前缀是否存在, 如”xlink:href”中xlink是已知的命名空间。

transition.text – 在过渡開始时设置文本内容。
transition.tween –
使某个属性过渡到一个新的属性值,该属性能够是非attr或非style属性。比方text。
transition.select – 选择每一个当前元素的某个子元素进行过渡。

内部方法(Internals)

  • d3.functor –
    函数化。将非函数变量转化为只返回该变量值的函数。输入函数,则返回原函数;输入值,则返回一个函数,该函数只返回原值。

  • d3.rebind –
    将一个对象的方法绑定到另一个对象上。

  • d3.dispatch –
    创建一个定制的事件。

  • dispatch.on –
    添加或移除一个事件监听器。对一个事件可添加多个监听器。

  • dispatch.type –
    触发事件。其中‘type’为要触发的事件的名称。

transition.selectAll – 选择每一个当前元素的多个子元素进行过渡。

d3.scale(Scales)

transition.filter – 通过数据筛选出当前元素中的部分元素进行过渡。

定量变换(Quantitative)

  • d3.scale.linear –
    创建一个线性定量变换。(建议参考源码以深入理解各种变换。)

  • linear –
    输入一个定义域的值,返回一个值域的值。

  • linear.invert –
    反变换,输入值域值返回定义域值。

  • linear.domain –
    get或set定义域。

  • linear.range –
    get或set值域。

  • linear.rangeRound –
    设置值域,并对结果取整。

  • linear.interpolate –
    get或set变换的插值函数,如将默认的线性插值函数替换成取整的线性插值函数d3_interpolateRound。

  • linear.clamp –
    设置值域是否闭合,默认不闭合。当值域闭合时,如果插值结果在值域之外,会取值域的边界值。如值域为[1,
    2],插值函数的计算结果为3,如果不闭合,最终结果为3;如果闭合,最终结果为2。

  • linear.nice –
    扩展定义域范围使定义域更规整。如[0.20147987687960267,
    0.996679553296417] 变成 [0.2, 1]。

  • linear.ticks –
    从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。

  • linear.tickFormat –
    获取格式转化函数,通常用于坐标轴刻度的格式转化。如:var x =
    d3.scale.linear().domain([-1, 1]);
    console.log(x.ticks(5).map(x.tickFormat(5, “+%”))); // [“-100%”,
    “-50%”, “+0%”, “+50%”, “+100%”]

  • linear.copy –
    从已有的变换中复制出一个变换。

  • d3.scale.sqrt –
    创建一个求平方根的定量转换。

  • d3.scale.pow –
    创建一个指数变换。(可参考linear对应函数的注释)

  • pow –
    输入一个定义域的值,返回一个值域的值。

  • pow.invert –
    反变换,输入值域值返回定义域值。

  • pow.domain –
    get或set定义域。

  • pow.range –
    get或set值域。

  • pow.rangeRound –
    设置值域,并对结果取整。

  • pow.interpolate –
    get或set变换的插值函数。

  • pow.clamp –
    设置值域是否闭合,默认不闭合。

  • pow.nice –
    扩展定义域范围使定义域更规整。

  • pow.ticks –
    从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。

  • pow.tickFormat –
    获取格式转化函数,通常用于坐标轴刻度的格式转化。

  • pow.exponent –
    get或set指数的幂次。默认为1次幂。

  • pow.copy –
    从已有的变换中复制出一个变换。

  • d3.scale.log –
    创建一个对数变换。(可参考linear对应函数的注释)

  • log –
    输入一个定义域的值,返回一个值域的值。

  • log.invert –
    反变换,输入值域值返回定义域值。

  • log.domain –
    get或set定义域。

  • log.range –
    get或set值域。

  • log.rangeRound –
    设置值域,并对结果取整。

  • log.interpolate –
    get或set变换的插值函数。

  • log.clamp –
    设置值域是否闭合,默认不闭合。

  • log.nice –
    扩展定义域范围使定义域更规整。

  • log.ticks –
    从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。

  • log.tickFormat –
    获取格式转化函数,通常用于坐标轴刻度的格式转化。

  • log.copy –
    从已有的变换中复制出一个变换。

  • d3.scale.quantize –
    创建一个quantize线性变换,定义域为一个数值区间,值域为几个离散值。

  • quantize –
    输入数值,返回离散值。如: 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;

  • quantize.invertExtent –
    返回得到某个离散值的值域范围。 // q.invertExtent(‘a’) 的结果为 [0,
    0.3333333333333333]

  • quantize.domain –
    get或set变换的定义域。

  • quantize.range –
    get或set变换的值域。

  • quantize.copy –
    从已有的变换中复制出一个变换。

  • d3.scale.threshold –
    构建一个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]

  • threshold –
    输入数值,返回离散值。

  • threshold.invertExtent –
    输入离散值,返回数值。

  • threshold.domain –
    get或set变换的定义域。

  • threshold.range –
    get或set变换的值域。

  • threshold.copy –
    从已有的变换中复制出一个变换。

  • d3.scale.quantile –
    构建一个quantile线性变换。使用方法与quantize完全类似,区别是quantile根据中位数来分隔区间,quantize根据算数平均值来分隔区间。example

  • quantile –
    输入数值,返回离散值。

  • quantile.invertExtent –
    输入离散值,返回数值。

  • quantile.domain –
    get或set变换的定义域。

  • quantile.range –
    get或set变换的值域。

  • quantile.quantiles –
    获得quantile变换的分隔值。示例: var q =
    d3.scale.quantile().domain([0, 1]).range([‘a’, ‘b’, ‘c’]);
    q.quantiles() returns [0.33333333333333326, 0.6666666666666665]

  • quantile.copy –
    从已有的变换中复制出一个变换。

  • d3.scale.identity –
    构建一个identity线性变换。特殊的linear线性变换,此变换定义域和值域相同,只在一些d3内部的axis或brush模块中用到。

  • identity –
    identity线性变换函数。返回输入值。

  • identity.invert –
    和identity函数相同,返回输入值。

  • identity.domain –
    get或set变换的定义域。

  • identity.range –
    get或set变换的值域。

  • identity.ticks –
    从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。

  • identity.tickFormat –
    获取格式转化函数,通常用于坐标轴刻度的格式转化。

  • identity.copy –
    从已有的变换中复制出一个变换。

transition.transition – 当前过渡结束后開始新的过渡。

序数变换(Ordinal)

  • d3.scale.ordinal –
    构建一个ordinal变换对象。ordinal变换的输入定义域和输出值域都是离散的。而quantitative变换的输入定义域是连续的,这是两者最大的不同。

  • ordinal –
    输入一个离散值,返回一个离散值。不在当前定义域中的输入值会自动加入定义域。

  • ordinal.domain –
    get或set变换的定义域。

  • ordinal.range –
    get或set变换的值域。

  • ordinal.rangePoints –
    用几个离散点来分割一个连续的区间。详情请看链接中的图例。

  • ordinal.rangeBands –
    用几个离散区间来分割一个连续的区间。详情请看链接中的图例。

  • ordinal.rangeRoundBands –
    用几个离散区间来分割一个连续的区间,区间边界和宽度会取整。详情请看链接中的图例。

  • ordinal.rangeBand –
    获取离散区间的宽度。

  • ordinal.rangeExtent –
    获取输出域的最小最大值。

  • ordinal.copy –
    从已有的变换中复制出一个变换。

  • d3.scale.category10 –
    用10种颜色构建一个ordinal变换。

  • d3.scale.category20 –
    用20种颜色构建一个ordinal变换。

  • d3.scale.category20b –
    用另外20种颜色构建一个ordinal变换。

  • d3.scale.category20c –
    用另外20种颜色构建一个ordinal变换。

transition.remove – 过渡结束后移除当前元素。
transition.empty – 假设过渡为空就返回true。

d3.svg (SVG)

假设当前元素中没有非null元素。则此过渡为空。
transition.node – 返回过渡中的第一个元素。
transition.size – 返回过渡中当前元素的数量。
transition.each – 遍历每一个元素运行操作。

Shapes

  • d3.svg.line –
    创建一个线段生成器.

  • line –
    在折线图里生成一段折线.

  • line.x –
    设置或获取x轴访问器.

  • line.y –
    设置或获取y轴访问器

  • line.interpolate –
    设置或获取插值模式.

  • line.tension –
    获取或设置曲线张力访问器(cardinal spline tension).

  • line.defined –
    定义线条在某一点是否存在.

  • d3.svg.line.radial –
    创建辐射线生成器.

  • line –
    生成分段的线性曲线,用于纬度线/雷达线图表.

  • line.radius –
    获取或设置radius访问器.

  • line.angle –
    获取或设置angle访问器.

  • line.defined –
    设置或获取线条定义存取器.

  • d3.svg.area –
    创建一个新的区域生成器.

  • area –
    生成一个线性的区域,用于区域图表.

  • area.x –
    获取或设置x坐标的访问器.

  • area.x0 –
    获取或设置x0坐标(基线)的访问器.

  • area.x1 –
    获取或设置x1坐标(背线)的访问器.

  • area.y –
    获取或设置y坐标的访问器.

  • area.y0 –
    获取或设置y0坐标(基线)的访问器.

  • area.y1 –
    获取或设置y1坐标(背线)的访问器.

  • area.interpolate –
    获取或设置插值模式.

  • area.tension –
    获取或设置张力访问器(the cardinal spline tension).

  • area.defined –
    判断获取或定义区域定义存取器.

  • d3.svg.area.radial –
    创建新的区域生成器.

  • area –
    生成分段的线性区域,用于纬度/雷达图表.

  • area.radius –
    获取或设置radius访问器.

  • area.innerRadius –
    获取或设置内部的radius(基线)访问器.

  • area.outerRadius –
    获取或设置外部的radius(背线)访问器.

  • area.angle –
    获取或设置angle访问器.

  • area.startAngle –
    获取或设置内部的angle(基线)访问器.

  • area.endAngle –
    获取或设置外部的angle(背线)访问器.

  • area.defined –
    判断获取或定义区域定义存取器.

  • d3.svg.arc –
    创建弧度生成器.

  • arc –
    生成一个线性弧度,用于饼图或甜甜圈图.

  • arc.innerRadius –
    获取或设置内部的半径访问器.

  • arc.outerRadius –
    获取或设置外部的半径访问器.

  • arc.startAngle –
    获取或设置起始角度访问器.

  • arc.endAngle –
    获取或设置结束角度访问器.

  • arc.centroid –
    计算弧的重心点.

  • d3.svg.symbol –
    创建符号生成器.

  • symbol –
    生成指定的符号,用于散列图.

  • symbol.type –
    获取或设置符号类型访问器.

  • symbol.size –
    获取或设置符号尺寸(in square pixels) 访问器.

  • d3.svg.symbolTypes –
    被支持的符号类型数组.

  • d3.svg.chord –
    创建新的弦生成器.

  • chord –
    生成一个二次贝塞尔曲线连接两个弧, 用于弦图.

  • chord.radius –
    获取或设置弧半径访问器.

  • chord.startAngle –
    获取或设置弧起始角度访问器.

  • chord.endAngle –
    获取或设置弧结束角度访问器.

  • chord.source –
    获取或设置源弧度访问器.

  • chord.target –
    获取或设置目标弧度访问器.

  • d3.svg.diagonal –
    创建新的斜线生成器.

  • diagonal –
    生成一个二维贝塞尔连接器, 用于节点连接图.

  • diagonal.source –
    获取或设置源点访问器.

  • diagonal.target –
    获取或设置目标点访问器.

  • diagonal.projection –
    获取或设置一个可选的点变换器.

  • d3.svg.diagonal.radial –
    创建一个新的斜线生成器.

  • diagonal –
    创建一个二维贝塞尔连接器,用于节点连接图.

不指定触发类型时,马上运行操作。

坐标轴(Axes)

  • d3.svg.axis –
    创建一个axis生成器。

  • axis –
    正式在页面中生成axis。

  • axis.scale –
    get或set坐标轴的scale尺度变换,该尺度变换设定了数值和像素位置的转换规则。

  • axis.orient –
    get或set坐标轴刻度方向。

  • axis.ticks –
    控制坐标轴刻度的产生方式。

  • axis.tickValues –
    设置特定的坐标轴的值。

  • axis.tickSize –
    指定坐标轴上刻度线的像素长度。

  • axis.innerTickSize –
    get或set坐标轴小刻度线的像素长度。

  • axis.outerTickSize –
    get或set坐标轴大刻度线的像素长度。

  • axis.tickPadding –
    指定坐标轴刻度和刻度文字之间的像素距离。

  • axis.tickFormat –
    设置刻度文字的格式。

当指定触发类型为’start’或’end’时,会在过渡開始或结束时运行操作。
transition.call – 以当前过渡为this运行某个函数。

Controls

  • d3.svg.brush –
    点击拖拽选择一个二维区域。

  • brush –
    在页面中某个区域中正式绑定一个brush。

  • brush.x –
    get或set brush的x变换,用于水平方向的拖拽。

  • brush.y –
    get或set brush的y变换,用于垂直方向的拖拽。

  • brush.extent –
    get或set brush的选取范围(extent)。

  • brush.clear –
    设置brush的选取范围(extent)为空。

  • brush.empty –
    判断brush的选取范围(extent)是否为空。

  • brush.on –
    get或set brush的事件监听器。可监听3种事件:brushstart, brush,
    brushend。

  • brush.event –
    通过程序触发监听事件,在通过程序设置extent后使用。

d3.ease – 定制过渡的缓冲函数。
ease –
缓冲函数。缓冲函数可让动画效果更自然,比方elastic缓冲函数可用以模拟弹性物体的运动。

d3.time (Time)

是一种插值函数的特例。
d3.timer – 開始一个定制的动画计时。

时间格式转换(Time Formatting)

  • d3.time.format –
    创建基于某种时间格式的本地时间格式转换器。

  • format –
    将一个date对象转换成特定时间格式的字符串。

  • format.parse –
    将特定时间格式的字符串转换成date对象。

  • d3.time.format.utc –
    创建基于某种时间格式的世界标准时间(UTC)格式转换器。

  • d3.time.format.iso –
    创建基于某种时间格式的ISO世界标准时间(ISO 8601 UTC)格式转换器。

功能类似于setTimeout,但内部用requestAnimationFrame实现,更高效。

时间变换(Time Scales)

  • d3.time.scale –
    创建一个线性时间变换,定义域为数值区间,值域为时间区间。常用于时间坐标轴的创建。详情可参考d3.scale.linear。

  • scale –
    输入为一个数值,返回为一个时间。

  • scale.invert –
    反变换,输入时间返回数值。

  • scale.domain –
    get或set变换的定义域。

  • scale.nice –
    扩展定义域范围使定义域更规整。

  • scale.range –
    get或set变换的值域。

  • scale.rangeRound –
    设置值域,并对结果取整。

  • scale.interpolate –
    get或set变换的插值函数,如将默认的线性插值函数替换成指数插值函数。

  • scale.clamp –
    设置值域是否闭合,默认不闭合。当值域闭合时,如果插值结果在值域之外,会取值域的边界值。详情参考linear.clamp。

  • scale.ticks –
    从定义域中取出有代表性的值。通常用于坐标轴刻度的选取。

  • scale.tickFormat –
    获取格式转化函数,通常用于坐标轴刻度的格式转化。

  • scale.copy –
    从已有的时间变换中复制出一个变换。

d3.timer.flush – 立马运行当前没有延迟的计时。

Time Intervals

  • d3.time.interval –
    返回一个对于本地时间时间间隔器.

  • interval –
    效果同interval.floor方法.

  • interval.range –
    返回指定区间内日期.

  • interval.floor –
    下舍入到最近的间隔值.

  • interval.round –
    上舍入或下舍入到最近的间隔值.

  • interval.ceil –
    上舍入到最近的间隔值.

  • interval.offset –
    返回指定时间间隔的日期偏移量.

  • interval.utc –
    返回对应的UTC时间间隔.

  • d3.time.day –
    返回指定时间基于天起始的时间(默认起始是12:00am).

  • d3.time.days –
    返回指定时间区间和间隔条件的基于天的所有时间,效果同day.range.

  • d3.time.dayOfYear –
    计算指定时间在年中的天数.

  • d3.time.hour –
    返回指定时间基于小时起始的时间(e.g., 1:00 AM).

  • d3.time.hours –
    返回指定时间区间和间隔条件的基于小时的所有时间, 效果同hour.range.

  • d3.time.minute –
    返回指定时间基于分钟起始的时间 (e.g., 1:02 AM).

  • d3.time.minutes –
    返回指定时间区间和间隔条件的基于分钟的所有时间,效果同minute.range.

  • d3.time.month –
    返回指定时间基于月起始的时间(e.g., February 1, 12:00 AM).

  • d3.time.months –
    返回指定时间区间和间隔条件的基于月的所有时间,效果同month.range.

  • d3.time.second –
    返回指定时间基于秒起始的时间(e.g., 1:02:03 AM).

  • d3.time.seconds –
    返回指定时间区间和间隔条件的基于秒的所有时间,效果同second.range.

  • d3.time.sunday –
    返回指定时间基于Sunday起始的时间(e.g., February 5, 12:00 AM).

  • d3.time.sundays –
    返回指定时间区间和间隔条件的基于sunday的所有时间,
    效果同sunday.range.

  • d3.time.sundayOfYear –
    计算以sunday为基点的指定时间在一年中的周数.

  • d3.time.monday –
    every Monday (e.g., February 5, 12:00 AM).

  • d3.time.mondays –
    alias for monday.range.

  • d3.time.mondayOfYear –
    computes the monday-based week number.

  • d3.time.tuesday –
    every Tuesday (e.g., February 5, 12:00 AM).

  • d3.time.tuesdays –
    alias for tuesday.range.

  • d3.time.tuesdayOfYear –
    computes the tuesday-based week number.

  • d3.time.wednesday –
    every Wednesday (e.g., February 5, 12:00 AM).

  • d3.time.wednesdays –
    alias for wednesday.range.

  • d3.time.wednesdayOfYear –
    computes the wednesday-based week number.

  • d3.time.thursday –
    every Thursday (e.g., February 5, 12:00 AM).

  • d3.time.thursdays –
    alias for thursday.range.

  • d3.time.thursdayOfYear –
    computes the thursday-based week number.

  • d3.time.friday –
    every Friday (e.g., February 5, 12:00 AM).

  • d3.time.fridays –
    alias for friday.range.

  • d3.time.fridayOfYear –
    computes the friday-based week number.

  • d3.time.saturday –
    every Saturday (e.g., February 5, 12:00 AM).

  • d3.time.saturdays –
    alias for saturday.range.

  • d3.time.saturdayOfYear –
    computes the saturday-based week number.

  • d3.time.week –
    alias for sunday.

  • d3.time.weeks –
    alias for sunday.range.

  • d3.time.weekOfYear –
    alias for sundayOfYear.

  • d3.time.year –
    返回指定时间基于年起始的时间(e.g., January 1, 12:00 AM).

  • d3.time.years –
    返回指定时间区间和间隔条件的所有时间,效果同year.range.

可用于处理闪屏问题。
d3.interpolate –
生成一个插值函数,在两个參数间插值。差值函数的类型会依据输入參数的类型(数字、字符串、颜色等)而自己主动选择。

构图(d3.layout)

interpolate – 插值函数。输入參数在[0, 1]之间。
d3.interpolateNumber – 在两个数字间插值。
d3.interpolateRound – 在两个数字间插值,返回值会四舍五入取整。
d3.interpolateString –
在两个字符串间插值。解析字符串中的数字。相应的数字会插值。

Bundle

  • d3.layout.bundle –
    construct a new default bundle layout.

  • bundle –
    apply Holten’s hierarchical bundling algorithm to edges.

d3.interpolateRgb – 在两个RGB颜色间插值。

弦图(Chord)

  • d3.layout.chord –
    初始化一个弦图对象, 返回一个 Chord 实例

  • chord.matrix –
    设置或者获取弦图实例对应的矩阵数据

  • chord.padding –
    设置或获取弦图各段圆弧之间的间隔角度

  • chord.sortGroups –
    设置或获取矩阵分组的排序函数

  • chord.sortSubgroups –
    设置或获取矩阵二级分组的排序函数

  • chord.sortChords –
    设置或获取弦图在z序上的排序函数(决定哪一组显示在最上层)

  • chord.chords –
    该函数会将参数处理成对 chord 更友好的格式并返回, 若没有提供参数,
    会调用matrix()来获取数据

  • chord.groups –
    该函数参数处理成更易于理解的分组信息, 若没有提供参数,
    会调用matrix()来获取数据

d3.interpolateHsl – 在两个HSL颜色间插值。
d3.interpolateLab – 在两个Lab*颜色间插值。
d3.interpolateHcl – 在两个HCL颜色间插值。
d3.interpolateArray – 在两个数列间插值。d3.interpolateArray( [0, 1],
[1, 10, 100] )(0.5); // returns [0.5, 5.5, 100]
d3.interpolateObject – 在两个object间插值。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图