1

原因:通常在缩放事件中更新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属性(例如居中所有的元素),只需要同步修改上面提到的属性就好了。
举例:

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

helloweilei
130 声望2 粉丝

菜鸟一枚,各位道友多多指教!