职教集团网站建设,网站建设那个比较好,普定县建设局网站,有哪个网站做策划方案的【趟坑记录】d3.zoom()的正确使用姿势 d3.v7 文章目录 【趟坑记录】d3.zoom()的正确使用姿势 d3.v7问题重现原因分析解决方案放缩平移写法特殊修改transform函数的写法 总结 在开发一个D3应用的时候遇到了一个
zoom相关的问题#xff0c;记录解决思路与方案 问题重现
最近在…【趟坑记录】d3.zoom()的正确使用姿势 d3.v7 文章目录 【趟坑记录】d3.zoom()的正确使用姿势 d3.v7问题重现原因分析解决方案放缩平移写法特殊修改transform函数的写法 总结 在开发一个D3应用的时候遇到了一个
zoom相关的问题记录解决思路与方案 问题重现
最近在开发一个D3应用的时候遇到了一个zoom相关的问题应用里有一个功能叫全景聚焦。我们都知道画布由两个标签组成见实现autoZoom(),画布自适应放缩并居中D3.js-v5最外层的是固定视口svg一般将zoom事件绑定在svg上内层是具体的画布是一个g标签在svg中的放缩与平移操作都作用在g上修改g的transform属性。这么做是为了避免用户将svg元素拖动到窗口之外后丢失拖动焦点无法将其拖回。而如果使svg不动g被拖动那么拖动焦点就不会丢失用户将g元素移动至视口外后还能将其拖回来。
我之前习惯这么写拖动平移
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)})
)在一些业务场景中往往需要对g元素进行特定的平移与放缩。如自动缩放至视口中央放大至当前的1.5倍。然而在其他直接地方修改了g 的‘transform’属性后如
const offsetX 10;
const offsetY 10;
g.attr(transform,translate(${offsetX},${offsetY})问题就出现了如下 可以看到在设置了特定的transform后再进行拖动会出现瞬移。
原因分析
因为监听的zoom事件是通过e.transform来进行放缩的。而在修改g元素的‘transform’属性为一个特定值后再进行拖动会从上一次的e.tranform值开始修改因此会出现错误。
举例说明
用户拖动e.transform的数值修改为了transform_1有一个自动放缩函数autoZoom将g的transform修改为了transform_2用户再次进行拖动g的transform会从transform_1开始修改因此会出现从transform_2到transform_1的瞬移。
解决方案
得知原因之后解决方案也非常明了。就是在任何需要进行放缩平移的地方都将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)这个操作后svg这个HTML node就会绑上一个__zoom 属性这个__zoom属性记录的是transform参数也就是我们对svg进行的放缩平移变换。为此我还特定打印了一下发现确实如此
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YmbofakK-1689904577005)(/Users/zqqcee/Library/Application Support/typora-user-images/image-20230720100136154.png)]
那现在事情就变得很简单了可以转变一下思路。之前我一直希望能够在autoZoom()之后获得zoom事件的偏移量使得我能够接着这个transform值修改。那么既然我无法获得偏移量可以尝试在autoZoom()方法中不要直接修改g的transform属性而去修改svg.__zoom值。
放缩平移写法
在一开始时使用d3.zoom()创建放缩对象zoom并在任何时刻都使用svg来call(zoom)修改放缩值。在绑定zoom事件时因为svg call了zoom因此任何偏移量都会记录在svg在修改g的transform属性时可以直接使用d3.zoomTransform(svg.node())来获得svg.__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数值transformXtransformYk。现在需要修改svg的__zoom属性为当前的transform数值。
查阅了官方文档找到了可以使用的API
d3.zoomIdentity。这个API可以创建一个新的transform:{x:0,y:0,k:1}并允许使用transform.translate(x,y), transform.scale(k)对其进行更改。selection.call(zoom.transform,new_transform);使用这个接口能够将svg.__zoom修改为new_transform
综上代码为
const new_transform d3.zoomIdentity.translate(transformX, transformY).scale(k);
d3.select(svg).call(zoom.transform,new_transform);总结
简而言之任何对g的放缩与平移操作都需要作用在svg上并且使用svg.__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为例
const autoZoom (transformX,transformY,k) {const new_transform d3.zoomIdentity.translate(transformX, transformY).scale(k);d3.select(svg).call(zoom.transform,new_transform);
}
