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

软件参考d3的知识点

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

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

         var width = 960,

             height = 500,

             radius = 10;

         var p0 = [250, 200, 60],

             p1 = [560, 300, 120];

         var svg = d3.select("body").append("svg")

             .attr("width", width)

             .attr("height", height)

           .append("g")

             .call(transition, p0, p1);

         svg.append("path")

             .attr("class", "mesh")

             .attr("d", d3.hexbin()

               .size([width, height])

               .radius(radius)

               .mesh);

         svg.selectAll("circle")

             .data([p0, p1])

           .enter().append("circle")

             .attr("class", function (d, i) { return i ? "end" : "start"; })

             .attr("cx", function (d) { return d[0]; })

             .attr("cy", function (d) { return d[1]; })

             .attr("r", function (d) { return d[2] / 2 - .5; });

         function transition(svg, start, end) {

             var center = [width / 2, height / 2];

               var  i = d3.interpolateZoom(start, end);

             svg

                 .attr("transform", transform(start))

               .transition()

                 .delay(250)

                 .duration(i.duration * 2)

                 .attrTween("transform", function () {

                     return function (t) {

                         var data1 = i(t);

                         var data2 = transform(data1);

                         return data2;

                     };

                 })

                 .each("end", function () { d3.select(this).call(transition, end, start); });

             function transform(p) {

                 var k = height / p[2];

                 console.log(k);

                 var trans= "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";

               //  console.log(trans);

                 return trans;

             }

         }

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

核心计算代码如下：

 // p0 = [ux0, uy0, w0]

 // p1 = [ux1, uy1, w1]

 export class interpolateZoom {

     rou = Math.SQRT2;

     rou2 = 2;

     rou4 = 4;

     p0;

     p1;

     ux0; uy0; w0;

     ux1; uy1; w1;

     dx;

     dy;

     d2;

     d1;

     b0;

     b1;

     r0;

     r1;

     dr;

     S;

     duration: number;

     constructor(p0, p1, rou) {

         if (rou != null && rou != undefined) {

             this.rou = rou;

             this.rou2 = Math.pow(this.rou, 2);

             this.rou4 = Math.pow(this.rou, 4);

         }

         this.p0 = p0;

         this.p1 = p1;

         this.ux0 = p0[0], this.uy0 = p0[1], this.w0 = p0[2],

             this.ux1 = p1[0], this.uy1 = p1[1], this.w1 = p1[2];

         this.dx = this.ux1 - this.ux0,

             this.dy = this.uy1 - this.uy0,

             this.d2 = this.dx * this.dx + this.dy * this.dy,

             this.d1 = Math.sqrt(this.d2),

             this.b0 = (this.w1 * this.w1 - this.w0 * this.w0 + this.rou4 * this.d2) / (2 * this.w0 * this.rou2 * this.d1),

             this.b1 = (this.w1 * this.w1 - this.w0 * this.w0 - this.rou4 * this.d2) / (2 * this.w1 * this.rou2 * this.d1),

             this.r0 = Math.log(Math.sqrt(this.b0 * this.b0 + 1) - this.b0),

             this.r1 = Math.log(Math.sqrt(this.b1 * this.b1 + 1) - this.b1),

             this.dr = this.r1 - this.r0,

             this.S = (this.dr || Math.log(this.w1 / this.w0)) / this.rou;

         //console.log(this.rou,this.S);

         this.duration = this.S * 1000 / 1.2;//除1.2 将duration缩小点

     }

     interpolate(t) {

         var s = t * this.S;

         if (this.dr) {

             // General case.

             var coshr0 = this.cosh(this.r0),

                 u = this.w0 / (this.rou2 * this.d1) * (coshr0 * this.tanh(this.rou * s + this.r0) - this.sinh(this.r0));

             return [

                 this.ux0 + u * this.dx,

                 this.uy0 + u * this.dy,

                 this.w0 * coshr0 / this.cosh(this.rou * s + this.r0)

             ];

         }

         // Special case for u0 ~= u1.

         return [

             this.ux0 + t * this.dx,

             this.uy0 + t * this.dy,

             this.w0 * Math.exp(this.rou * s)

         ];

     }

     cosh(x) {

         return (Math.exp(x) + Math.exp(-x)) / 2;

     }

     sinh(x) {

         return (Math.exp(x) - Math.exp(-x)) / 2;

     }

     tanh(x) {

         return this.sinh(x) / this.cosh(x);

     }

 }

d3.js的API

选择集

  • 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 - 获取相对某元素的触控点坐标。

过渡效果

  • 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 - 添加一个自定义的插值函数.

数据操作(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对象，将数组组织成层级结构. 示例：http://bl.ocks.org/phoebebright/raw/3176159/

  • 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执行某个函数.

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(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分隔值)文件。

字符串格式化(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

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");

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颜色转化为字符串格式。

命名空间

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

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

内部方法（Internals）

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

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

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

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

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

d3.scale(Scales)

定量变换(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 - 从已有的变换中复制出一个变换。

序数变换（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变换。

d3.svg (SVG)

Shapes

坐标轴(Axes)

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.time (Time)

时间格式转换(Time Formatting)

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

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

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

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

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

时间变换(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 - 从已有的时间变换中复制出一个变换。

Time Intervals

构图(d3.layout)

Bundle

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

  • bundle - apply Holten's hierarchical bundling algorithm to edges.

弦图(Chord)

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

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

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

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

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

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

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

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

集群(Cluster)

  • d3.layout.cluster - 用默认设置生成一个集群布局对象.

  • cluster.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)的排序.

  • cluster.children - 获取或设置子结点的访问器.

  • cluster.nodes - 计算并返回指定结点的子结点在集群中的信息(坐标,深度等).

  • cluster.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.

  • cluster.separation - 获取或设置相邻结点间的间隔(不仅限于兄弟结点).

  • cluster.size - 获取或设置布局的 宽 和 高 的大小.

  • cluster.nodeSize - 为结点指定大小.

力学(Force)

  • d3.layout.force -节点（node）基于物理模拟的位置连接。

  • force.on - 监听布局位置的变化。(仅支持"start","step","end"三种事件)

  • force.nodes - 获得或设置布局中的节点（node）阵列组。

  • force.links - 获得或设置布局中节点间的连接（Link）阵列组。.

  • 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 - 获取或设置布局的冷却系数.(冷却系数为0时,节点间不再互相影响)

  • force.tick - 让布局运行到下一步.

  • force.drag - 获取当前布局的拖拽对象实例以便进一步绑定处理函数.

层级布局(Hierarchy)

直方图(Histogram)

  • d3.layout.histogram - 构建一个默认直方图(用来表示一组离散数字的分布,横轴表示区间,纵轴表示区间内样本数量或样本百分比).

  • histogram.value - 获取或设置值访问器.

  • histogram.range - 获取或设置合法值范围.

  • histogram.bins - 指定如何将数据分组到不同的区间(bin)里, 返回一个构造函数.

  • histogram - 根据已设置的区间将数据分组,返回已分组的二维数组(compute the distribution of data using quantized bins).

  • histogram.frequency - 设置直方图Y轴值是区间内数据的总量还是百分比(compute the distribution as counts or probabilities).

层包(Pack)

  • d3.layout.pack - 用递归的圆环表现一个多层级布局.

  • pack.sort - 获取或设置一个函数, 用来给兄弟节点(同一父结点的子结点)排序.

  • pack.children - 获取或设置子结点的访问器.

  • pack.nodes - 计算并返回指定结点的子结点信息.

  • pack.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.

  • pack.value - 获取或设置一个函数, 用来计算圆环的大小(近似值).

  • pack.size - 设置整个布局画布的 宽 and 高.

  • pack.radius - 如果不想结点半径与结点的值相同, 可以传入一个函数用来计算结点半径.

  • pack.padding - 指定相邻结点之点的间距(近似值).

分区(Partition)

饼图(Pie)

  • d3.layout.pie - 构建一个默认的饼图.

  • pie - 该函数将传入的原始参数转换成可用于饼图或者环形图的数据结构.

  • pie.value - 获取或设置值访问器.

  • pie.sort - 设置饼图顺时针方向的排序方法.

  • pie.startAngle - 设置或获取整个饼图的起始角度.

  • pie.endAngle - 设置或获取整个饼图的终止角度.

堆叠图(Stack)

  • d3.layout.stack - 构建一个默认的堆叠图(用来展示一系列x轴相同的面积图或者立方图).

  • stack - 计算每一层的基线.

  • stack.values - 设置或者获取每层的值访问器.

  • stack.order - 设置每层的排序.

  • stack.offset - 指定总的基线算法.

  • stack.x - 设置或获取每层的x轴访问器.

  • stack.y - 设置或获取每层的y轴访问器.

  • stack.out - 设置或获取用来储存基线的输出函数.

树(Tree)

  • d3.layout.tree - position a tree of nodes tidily.

  • tree.sort - 设置或获取一个函数, 用来给兄弟节点(同一父结点的子结点)排序.

  • tree.children - 设置或获取子结点的访问器.

  • tree.nodes - 计算并返回指定结点的子结点信息.

  • tree.links - 指定一个子结点数组(通常是nodes函数返回值), 计算它们与父结点的连接信息.

  • tree.separation - 设置或获取相隔结点之间的间隔计算函数.

  • tree.size - 指定整个布局的宽和高.

  • tree.nodeSize - 给全部结点指定一个固定的大小(会导致tree.size失效).

矩阵树(Treemap)

  • 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 (Geography)

Paths

Projections

Streams

d3.geom (Geometry)

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

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 (Behaviors)

Drag

Zoom

  • d3.behavior.zoom - create a zoom behavior.

  • zoom - apply the zoom behavior to the selected elements.

  • 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.

软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移的更多相关文章

  1. 软件项目技术点(1)——Tween算法及缓动效果

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...

  2. 软件项目技术点(5)——在canvas上绘制动态网格线

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果. 下面是具体实现的代码,draw函数里计算出大 ...

  3. 软件项目技术点(6)——结合鼠标操作绘制动态canvas画布

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 我们创建一个类封装了所有鼠标需要处理的事件. export class MouseEventInfo { el: HTMLElemen ...

  4. 软件项目技术点(7)——在canvas上绘制自定义图形

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...

  5. 软件项目技术点(9)——如何将gif动态图拆分绘制

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 背景介绍 我们的软件支持插入gif图片,并且展示在软件里是动态的,例如插入下面这张gif图. 在软件里显示的同样是这样的动态效果: 那 ...

  6. 软件项目技术点(2)——Canvas之平移translate、旋转rotate、缩放scale

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transf ...

  7. 软件项目技术点(2)——Canvas之坐标系转换

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...

  8. 软件项目技术点(2)——Canvas之获取Canvas当前坐标系矩阵

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操 ...

  9. 软件项目技术点(8)—— canvas调用drawImage绘制图片

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本 ...

随机推荐

  1. QQ第三方登陆示例

    先上图 若想实现QQ登录,需要成为QQ互联的开发者,审核通过才可实现.注册方法可参考链接http://wiki.connect.qq.com/%E6%88%90%E4%B8%BA%E5%BC%80%E ...

  2. 海思的一个 Makefile 解析

    Makefile 原文 include ../Makefile.param #ifeq ($(SAMPLE_PARAM_FILE), ) # SAMPLE_PARAM_FILE:=../Makefil ...

  3. 高阶篇：4.2.5）DFMEA建议措施及后续完备

    本章目的:填写建议措施及DFMEA后续完备. 1.建议措施(k) 定义 总的来说,预防措施(降低发生率)比探测措施更好.举例来说,比起设计定稿后的产品验证/确认,使用已证实的设计标准或最佳实践更加可取 ...

  4. js高级程序设计 笔记 --- 表单

    一,基础知识 在html中,表单是form元素,而在js中,表单对应的是HTMLFormElement类型,继承自HTMLElement,其独特的属性和方法有(常见): action:接收请求的URL ...

  5. [转] Centos 系统swap虚拟内存添加与删除配置

    [From]https://blog.csdn.net/lengyue1084/article/details/51405640 [From]https://yuukis.cn/24/ SWAP是Li ...

  6. bundle 与 package

    bundle是Apple提供的软件安装的便捷方法. bundle为用户和开发者提供了一个简单地接口. bundle 和 package package:看起来像一个文件的目录       bundle ...

  7. Nginx unknown directive ""

    原因:由于使用记事本编辑了nginx.conf. 解决方案:参考https://www.jianshu.com/p/2516ec8bae72

  8. 基于JQuery easyui，gson的批量新增/修改和删除-servlet版

    最近项目需要用到在页面进行批量操作,做了一些这方面的学习,参照网上的资料写了个小例子,记录一下: 准备 引入gson-2.6.2.jar,这里使用gson而不使用json-lib,原因是json-li ...

  9. Unity中利用委托与监听解耦合的思路

    这篇随笔是一篇记录性的随笔,记录了从http://www.sikiedu.com/my/course/304,这门课程中学到的内容,附带了一些自己的思考. 一.单例模式的应用 首先假想一种情况,现在需 ...

  10. [转]常用 GDB 命令中文速览

    目录 break -- 在指定的行或函数处设置断点,缩写为 b info breakpoints -- 打印未删除的所有断点,观察点和捕获点的列表,缩写为 i b disable -- 禁用断点,缩写 ...