记数据血缘前端中panzoom初始化缩放比例的问题探索

0. 背景

有人问我 血缘前端vue版本能不能改初始缩放比例，节点太多的情况下初始缩放比例太大导致无法看清全图，需要渲染完之后手动缩放才能。
当时编写代码的时候使用 panzoom这个库来完成 血缘图的缩放工作。
使用的panzoom版本是： “panzoom”: “^9.4.1”（@panzoom/panzoom）

1. 网上查到了无效方法

在网上查了一下，大概有这两种写法

// 1.5 放大缩小倍率
const panzoom = Panzoom(elem,{ contain: ‘outside’, startScale: 1.5 })

panzoomElement.panzoom({
minScale: 0.7,
maxScale: 2,
startTransform: ‘scale(0.7)’,
duration: 100,
contain: ‘automatic’,
});

基本思路是在初始化panzoom对象时直接配置相关 options。尝试后发现失败，猜测可能我用的是@panzoom/panzoom，其他人用的不是相同lib（他人博文未给出具体的名字）

2.自行查看源码 ，找到能用的方案

直接查询panzoom的源码，

2.1手动调用方法

pan.zoomTo(0,0,0.5)

这样的方法，初始化panzoom后，主动调用一次缩放方法到指定比例（上例是1/2倍），觉得有点stupid，而且由于是初始化完成之后再缩放。前端效果会先正常比例再缩放，节点闪一下

2.2 初始化参数

之后发现panzoom的初始化 options里有initialZoom参数，配置之后仍有上述闪烁问题，没有解决方案

const pan = panzoom(mainContainer,{
initialZoom:0.5,
minZoom: 0.5,
maxZoom: 2,
});

3. github查看lib原作者

为了解决闪烁问题，然后我直接去github查看了panzoom源库（https://github.com/anvaka/panzoom）

在closed issue 中，也发现了 16年一个Setting an initial zoom 相关issue，16年作者给出的方案也是2.1那种，只不过作者使用的是zoomabs（）这个方法。

20年，有人pr了一个带初始缩放参数的panzoom版本，最终作者在9.3.0的版本进行了merged。使用方法也是2.2中提到的
闪烁问题没找到，不过官方方法也是这个的话，那就到这里吧

4.其他

查看源码时，发现默认的缩放比例参数（scale）在Transform 这个对象，这个对象又是PanZoomController的参数，PanZoomController又是PanZoomOptions一个可选的参数

如果能顺着这个链路改scale应该是可行的，可惜尝试了下js不太熟练失败了。

当然也可以直接下载panzoom的源码改transform这个文件的默认scale，然后重新自行编译使用，不过我觉得太麻烦了算了吧~