手動更新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;
相關文章
相關標籤/搜索