d3.js中的zoom缩放

本文主要是介绍d3.js中的zoom缩放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

d3.js中的zoom缩放

<body>
<svg style="width:500px;height: 500px;background-color: wheat;"><rect width="300" height="100" rx="10" ry="10" x="10" y="10" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
<script>let svg = d3.selectAll('svg')console.log(svg)var zoom = d3.zoom().scaleExtent([0.1, 10]) // 鼠标缩放的距离, 范围.on('start', () => { // zoom 事件发生前 将变小手console.log('start')svg.style('cursor', 'pointer')}).on('zoom', (e) => {console.log(e)svg.selectAll('rect').attr('transform','translate(' + e.transform.x + ',' + e.transform.y + ') scale(' + e.transform.k + ')')}).on('end', () => {svg.style('cursor', 'default')});svg.call(zoom).call(zoom.transform, d3.zoomIdentity.scale(1))
</script>
</body>

scaleExtent

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

const zoom = d3.zoom()
.scaleExtent([1, 40])
.on("zoom", zoomed);

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

svg绑定缩放事件

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

const svg = d3.select("svg");
const g = svg.append("g");
svg.call(zoom);
function zoomed() {g.attr("transform", d3.event.transform);
}

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

zoom.transform

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

//直接缩放
svg.call(zoom.transform,d3.zoomIdentity.translate(100，100)
);
//多少时间内完成缩放
svg.transition().duration(1000).call(zoom.transform,d3.zoomIdentity.translate(100，100)
);

上面

第一个表示从一个位置直接变成另一个位置；

第二个表示有过渡效果的变化，

其中的duration用来控制过渡时间。

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

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

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

d3.js中zoom缩放中心点

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

点击位置放大

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

function clicked([x,y]) {d3.event.stopPropagation();svg.transition().duration(1000).call(zoom.transform,d3.zoomIdentity.translate(width / 2, height / 2).scale(2).translate(-x, -y),d3.mouse(svg.node()));
}

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

我们之前说了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())，它是干嘛的呢？它是用来设置弹性动画的圆心位置：