手动更新svg的transform属性后可能出现缩放时跳跃现象

时间 2020-05-21

标签手动更新 svg transform 属性可能出现缩放跳跃现象繁體版

原文原文链接

缘由：一般在缩放事件中更新transform属性时会读取d3.event.scale和d3.event.translate中的值获得当前的缩放比例和平移值。当在事件以外更新时，元素虽然实现了指定的换，可是d3.event中的值并无更新，因此再次缩放时依然实在旧的参数上计算新的变换参数，从而致使新的参数可能与实际的参数差别很大。svg

解决方法：d3.event.scale和d3.event.translate参数实际上来自与svg元素的__zoom属性，该属性包含三个参数：k,x,y;分别对应scale,translate[0]和translate[1],因此若是在事件以外修改transform属性（例如居中全部的元素），只须要同步修改上面提到的属性就行了。
举例：code

svg.attr("transform","translate(100,200),scale(4)");
    svg.__zoom.k=4; 
    svg.__zoom.x=100; 
    svg.__zoom.y=200;