D3.js version4教程(4)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_26025363/article/details/78697208

D3.js version4教程(4)

插值器

插值器提供了在两个值之间多种插值的方法。值可以是数值,颜色,字符串,数组或者其他可以深层嵌套的对象
比例尺的关系是通过插值器来体现的,当需要某种关系的时候,可能默认的比例尺不适合该关系,就需要自定义插值器或者该插值器来进行处理.

d3.interpolate(a, b)

返回一个起止值分分别为a和b的插值器,使用的算法如下:
1. 如果 b 是一个 null, undefined 或者 boolean, 则返回常量b.
2. 如果 b 是一个数值,则使用interpolateNumber.
3. 如果 b 是一个 color 或者是一个表示颜色的字符串,则使用 interpolateRgb.
4. 如果 b 是一个 [date](https://developer.mozilla.org /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)则使用interpolateDate.
5. 如果 b 是一个字符串则使用 interpolateString.
6. 如果 b 是一个array则使用interpolateArray.
7. 如果 b 是一个可以转为数值类型的值则使用interpolateNumber.
8. 使用interpolateObject. 确定好类型之后,a被转化为对应的类型。

  • d3.interpolateNumber(a, b)
    在a和b两个数值之间进行插值
    定义如下:
    function interpolator(t) {
    return a * (1 - t) + b * t;
    }

  • d3.interpolateRound(a, b)
    返回一个在a和b之间进行插值的插值器,但是这个方法对插值结果进行了取整。

  • d3.interpolateString(a, b)
    返回一个在字符串a和b之间进行插值的插值器。字符串插值器会在两个字符串之间寻找嵌入的数值,然后再使用数值插值器。
    如果在字符串b中找到嵌入的数值,则会在a中找对应的数值。如果找到了则在这两个嵌入的数值之间使用interpolateNumber。
    字符串中除了数值外,其余的部分作为模板常量不会发生改变,如果剩余的非数值字符串不同,则以b为准。

  • d3.interpolateDate(a, b)
    返回一个日期类型的插值器。返回的类型为Date类型

  • d3.interpolateArray(a, b)
    返回一个在a和b两个数组之间插值的插值器。在内部首先会创建一个和b等长的数组,对于数组b中的每个元素,如果在a中有对应的元素,则则两个对应的元素之间进行插值。如果a中没有对应的元素则直接使用b中的元素

  • d3.interpolateObject(a, b)
    返回一个在两个对象之间插值的插值器。在内部会创建一个临时的对象,这个临时的对象和b有相同的属性,然后在a中找相同的属性,然后对属性进行分别插值,如果a中没有对应的属性则返回b的值。

  • d3.interpolateTransformCss(a, b)
    创建一个2D CSS变换插值器,比如translate, rotate, x-skew 和 scale

  • d3.interpolateTransformSvg(a, b)
    创建一个2D SVG变换插值器

  • d3.interpolateZoom(a, b)
    返回一个在a和b两个二维视图之间进行插值的插值器。基于Jarke J. van Wijk and Wim A.A. Nuij的“Smooth and efficient zooming and panning”。每个视图被定义为一个包含三个属性的数组:cx, cy 和 width。 前两个值cx, cy代表视图的中心。width代表视图的尺寸 、 返回的插值器包含一个 duration 属性用来定义过渡的毫秒数。

取样

d3.quantize(interpolator, n)
从指定的interpolator中返回n个间隔均匀的采样点。n是一个比1大的整数。第一个采样点取t=0,最后一个采样点取t=1. 这个方法可以用来从指定的插值器中生成固定数量的样本

颜色空间

  • d3.interpolateRgb(a, b)
    返回一个RGB颜色空间的,起止值为a和b的插值器。

  • d3.interpolateRgbBasis(colors)
    在指定的一组颜色之间进行B-spline插值,颜色都会被转化为RGB color space表示。t=0时返回colors[0],t=1时返回colors[colors.length - 1],不支持透明度的插值

  • d3.interpolateRgbBasisClosed(colors)
    在指定的一组颜色之间进行B-spline插值,颜色都会被转化为RGB color space表示。控制点首位相连呈周期状,在创建周期颜色比例尺时是有用的

猜你喜欢

转载自blog.csdn.net/qq_26025363/article/details/78697208