手动更新svg的transform属性后可能出现缩放移动时的跳跃现象
情况概述:
实现在svg画布上进行某元素定位,将视图坐标更换成功后,进行移动缩放操作,页面出现坐标跳跃。
问题原由:
一般在缩放事件中更新transform属性时会读取d3.event.scale和d3.event.translate中的值获得当前的缩放比例和平移值。当在事件以外更新时,元素虽然实现了指定的换值,可是d3.event中的值并无更新,因此再次缩放时依然实在旧的参数上计算新的变换参数,从而致使新的参数可能与实际的参数差别很大。
解决方法:
d3.event.scale和d3.event.translate参数实际上来自与svg元素的__zoom属性,该属性包含三个参数:k,x,y;分别对应scale,translate[0]和translate[1],因此若是在事件以外修改transform属性,只须要同步修改上面提到的属性就行了。
解决方法示例代码:
//定位某元素
document.getElementById("root").setAttribute("transform", "translate(" + (12000-(currX)) + ", " + (4000-(currY)) + ") scale("+1.1+")")
//更改zoom值
d3.select("#powerSVG")._groups[0][0].__zoom.x= (12000-(currX)) -4368.810923307491/ 0.6040000000000003 * 1.1 ;
d3.select("#powerSVG")._groups[0][0].__zoom.y= (4000-(currY)) - 3033.5091844923377/ 0.6040000000000003 * 1.1 ;
d3.select("#powerSVG")._groups[0][0].__zoom.k=1.1;