d3.js中的缩放(zoom)是一个很重要的概念,今天来看看zoom的常见用法:

scaleExtent

先用d3.zoom初始化一个zoom,然后用scaleExtent去设置它的缩小,放大的范围:

上面设置的是最小为原始大小,最大可以放大40倍。

svg绑定缩放事件

一般的缩放事件是先在svg上绑定zoom事件,然后监听zoom事件,将缩放结果设置给内部的g。

这看起来是一个很简单的设定,但是如果你给内部的g添加zoom事件其实也是可以的,但是在拖动的时候会有抖动的情况,因此最好在svg上绑定zoom事件。

zoom.transform

zoom.transform是zoom的核心方法了,用来控制如何缩放,一般性写法如下:

上面第一个表示从一个位置直接变成另一个位置;第二个表示有过渡效果的变化,其中的duration用来控制过渡时间。

真正比较难理解的就是d3.zoomIdentity表达的位置信息,这要先了解下d3.js的缩放机制:

d3.js中的zoom缩放 gif d3.js中的zoom缩放

在d3.js进行缩放的时候,有一个缩放的中心点,我们在demo进行测试的时候就会发现,这个缩放的中心点就是鼠标所在的位置,在鼠标所在的位置局部放大和缩小。

在默认情况下,这种中心点的位置在svg的[width/2,height/2]的位置,例如调用scaleTo,scaleBy方法的时候,就是已svg的中心为缩放的中心进行缩放;如果是调用d3.zoomIdentity.scale(2)进行缩放,那么缩放的中心点则为[0,0]:

因为d3.zoomIdentity表示的是坐标位置[0,0],当前缩放为1的一种状态,因此它将缩放中心的位置定在了[0,0]。

点击位置放大

上面我们大致了解了缩放中心点和d3.zoomIdentity,那么demo中一点击圆形,就局部放到圆形的位置,是如何做到的呢?我们先看click的关键代码:

我们模拟一个点击一个圆,位置在(10,10),看看它是如何被放置到中间去的:

background Layer 1 (10,10) (10,10) 一个圆位置(10,10) d3.zoomIdentity.translate(width / 2, height / 2) 将画布移动到[width/2,height/2],开始在[0,0] (10,10) (10,10) d3.zoomIdentity.translate(width / 2, height / 2).scale(2).translate(-10,-10) (10,10) 位置移到这里去,移动[-10,-10] d3.zoomIdentity.translate(width / 2, height / 2).scale(2) 接着放大2倍

我们之前说了d3.zoomIdentity表示当前在[0,0],那么d3.zoomIdentity.translate(width / 2, height / 2)表示当前在svg中间,然后再放大2被(scale(2)),那么此时就是在svg的中间放大的。

然后再移动[-10,-10],注意此时的移动是算上了当前的缩放的,因为当前是放大2倍的,因此移动[-10,-10]刚好可以将圆心放入中间。

d3.transfrom第三个参数

上面click圆的例子中,我们看到还有一个参数d3.mouse(svg.node()),它是干嘛的呢?它是用来设置弹性动画的圆心位置:

d3.js中的zoom缩放 gif d3.js中的zoom缩放

我们可以看到这个点,从起点到终点,中间划过了一个完美的曲线,为啥呢?因为我设置的弹性点为[0,0]:

弹性点就是让你在起点和终点之间保持一直曲线变换的关系,大致如下:

background Layer 1 起点 终点 弹性点

invert,scaleBy,d3.zoomTransform等方法

invert表示形变的反应用,具体参见d3.js中apply,invert,rescaleX等方法

scaleBy就是每次缩放多少,例如scaleBy(2),那么每次放大两倍数,与之相仿的就是scaleBy(.5),每次缩小两倍。

d3.zoomTransform就是获取一个节点当前的变形程度(包括位移和缩放)。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

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

图片:

提交
还可以输入500个字