d3.js中的transform是zoom中的一种描述形变的一种对象,一般的结构为:{k:1,x:0,y:0},其中x,y表示现在的偏移量,k表示当前缩放量。

它的获取方式一般有以下两种:

同时它有一些apply,invert,rescaleX等方法,现在一起来看看。

transform的apply,invert方法

apply方法就是应用形变:

它的计算方式为[xk + X, yk + Y],其中[x,y]表示传入apply的点,[X,Y]表示transfrom中的x,y。

除了apply之外,还有applyX和applyY,applyX和applyY只接受一个数字,只有apply接受一个数组。

invert是形变反应用,它和apply是相反的:

它的计算方式为[(x - X) / k, (y - Y) / k],其中[x,y]表示传入invert的点,[X,Y]表示transfrom中的x,y。

虽然有点难理解什么是反应用,但是看上面的demo可以知道,他和apply是唱反调的,apply向右,invert就向左边;apply放大,invert就缩小。

invertX和invertY都只是接受数字,表示反向求形变的x和y。

transfrom的rescaleX,rescaleY

rescaleX,rescaleY一般是配合scale(比例尺)一起使用,我们先来看下rescaleX的定义:

它的含义并不太好理解,我们举个例子,例如现在有一个比例尺,然后有一个transform,看看它的rescaleX是多少:

我们按照rescaleX的定义去走,第一步,获取比例尺的range(),这里得到[0,100],然后每个执行invertX,他是apply的反应用,本来x:10是要加10,因此这里减10,range变成了[-10,90]。

(注:map方法一般只有一个参数,它的第二个参数表示context,执行上下文,也就是第一个方法中出现的this,因为第一个方法中有时会调用其他方法,因此第二个参数最好加上)

domain = range.map(x.invert, x)中的invert是比例尺中的方法,表示通过range得到domain。本例中的domain[0,10]对应range(0,100),现在range(-10,90)因此对应的domain为[-1,9]。

x.copy().domain(domain);这个是复制比例尺,将得到的domain设置进新的比例尺中。

rescaleY和rescaleX类似,定义如下:

它处理的是y方向上的形变,然后得到一个新的domain。注意只有rescaleX,rescaleY方法,没有rescale方法,这个和apply,invert不同。

transfrom的rescaleX,rescaleY有何意义

我们可以看到transfrom的rescaleX,rescaleY很复杂,它其实主要用在比例尺的移动上:

background Layer 1 0 100 0 100 向右移动10 -10 90 1 2 3

设想一下,在一个水平的坐标轴上[0,100],向右移动10px,那么此时坐标轴需要向左移动10px,展现[-10,90];如果手势为放大,那么坐标轴的区域就要变小,例如可能变成[30,50],这其实这就和rescaleX比较像,先将range()做一个invertX(反形变),然后求出对应的domain(),重新设置坐标轴。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字