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.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())，它是干嘛的呢？它是用来设置弹性动画的圆心位置：
我们可以看到这个点，从起点到终点，中间划过了一个完美的曲线，为啥呢？因为我设置的弹性点为[0,0]:
d3.js中zoom弹性点(二维码)
弹性点就是让你在起点和终点之间保持一直曲线变换的关系，大致如下：
invert,scaleBy,d3.zoomTransform等方法
invert表示形变的反应用，具体参见d3.js中apply,invert,rescaleX等方法。
scaleBy就是每次缩放多少，例如scaleBy(2)，那么每次放大两倍数，与之相仿的就是scaleBy(.5)，每次缩小两倍。
d3.zoomTransform就是获取一个节点当前的变形程度(包括位移和缩放)。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
