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

手动更新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;