【趟坑记录】d3.zoom()的正确使用姿势 @d3.v7
文章目录
【趟坑记录】`d3.zoom()`的正确使用姿势 @d3.v7问题重现原因分析解决方案放缩平移写法特殊修改`'transform'`函数的写法
总结
在开发一个D3应用的时候遇到了一个
zoom相关的问题，记录解决思路与方案
问题重现
最近在开发一个D3应用的时候遇到了一个zoom相关的问题，应用里有一个功能叫全景聚焦。我们都知道画布由两个标签组成（见实现autoZoom(),画布自适应放缩并居中@D3.js-v5），最外层的是固定视口
我之前习惯这么写拖动平移：
const svg = d3.select('#viewport')
.attr('width', width)
.attr('height', height)
const g = svg.append('g')
.attr('id', 'container')
.attr('width', width)
.attr('height', height)
svg.call(
d3.zoom().on('zoom', (e) => {
const transform = `translate(${e.transform.x},${e.transform.y}) scale(${e.transform.k})`
g.attr('transform', transform)
})
)
在一些业务场景中，往往需要对
const offsetX = 10;
const offsetY = 10;
g.attr('transform',`translate(${offsetX},${offsetY})`
，问题就出现了，如下：
可以看到，在设置了特定的'transform'后，再进行拖动，会出现瞬移。
原因分析
因为监听的zoom事件是通过e.transform来进行放缩的。而在修改
举例说明：
用户拖动，e.transform的数值修改为了transform_1有一个自动放缩函数autoZoom，将
解决方案
得知原因之后，解决方案也非常明了。就是在任何需要进行放缩平移的地方，都将transform进行缓存，下一次再需要进行放缩平移操作时，从上一次的transform开始进行更改即可。
一开始我想的解决方案是在每次鼠标拖动时都记录一个偏移量，但是这个偏移量比较难获取，心想d3这么大个库应该不至于用这么蠢的办法，应该有更好用的方案。
查了一下官方的API，发现了一个叫zoomTransform(node)的接口，这个接口传入的是一个HTML node，需要用d3.select(xx).node()来获得，可以获取这个node的放缩数据。官方文档是这么说的：
Internally, an element’s transform is stored as element.__zoom; however, you should use this method rather than accessing it directly. If the given node has no defined transform, returns the transform of the closest ancestor, or if none exists, the identity transformation
在内部，元素的变换存储为 element.__zoom；但是，您应该使用此方法（指的是zoomTransform）而不是直接访问它。如果给定节点没有定义的变换，则返回最近祖先的变换，或者如果不存在，则返回恒等变换。返回的变换表示以下形式的二维变换矩阵(略)：
These properties should be considered read-only; instead of mutating a transform, use transform.scale and transform.translate to derive a new transform.
这些属性应被视为只读；使用transform.scale和transform.translate来派生新的变换，而不是改变变换。（下文将介绍如何派生新的变换）
进一步查看了源码，发现在svg.call(zoom)这个操作后，
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YmbofakK-1689904577005)(/Users/zqqcee/Library/Application Support/typora-user-images/image-20230720100136154.png)]
那现在事情就变得很简单了，可以转变一下思路。之前我一直希望能够在autoZoom()之后，获得"zoom"事件的偏移量，使得我能够接着这个'transform'值修改。那么既然我无法获得偏移量，可以尝试在autoZoom()方法中不要直接修改
放缩平移写法
在一开始时，使用d3.zoom()创建放缩对象zoom，并在任何时刻都使用
const svg = d3.select('body').append('svg');
const g = svg.append('g');
const zoom = d3.zoom().on('zoom',()=>{
g.attr('transform', d3.zoomTransform(svg.node()));
})
特殊修改'transform'函数的写法
这里需要说明一下autoZoom()的写法，假设我们现在已经计算出了'transform'数值transformX，transformY，k。现在需要修改
查阅了官方文档，找到了可以使用的API：
d3.zoomIdentity。这个API可以创建一个新的'transform':{x:0,y:0,k:1}，并允许使用transform.translate(x,y), transform.scale(k)对其进行更改。selection.call(zoom.transform,new_transform);使用这个接口能够将
综上，代码为：
const new_transform = d3.zoomIdentity.translate(transformX, transformY).scale(k);
d3.select('svg').call(zoom.transform,new_transform);
总结
简而言之，任何对
完整代码：
//zoom事件绑定
const svg = d3.select('body').append('svg');
const g = svg.append('g');
const zoom = d3.zoom().on('zoom',()=>{
g.attr('transform', d3.zoomTransform(svg.node()));
})
//需要修改特定transform的函数，以autoZoom为例
const autoZoom = (transformX,transformY,k) =>{
const new_transform = d3.zoomIdentity.translate(transformX, transformY).scale(k);
d3.select('svg').call(zoom.transform,new_transform);
}
推荐链接
您阅读本篇文章共花了：
发表评论