d3.js缩放行为:在保持翻译一致的同时改变比例

时间:2016-02-27 02:42:12

标签: d3.js zoom scale zooming

我使用d3 zoom behavior进行缩放/拖动,但缩放步骤对我来说很粗糙。当然,我可以简单地重新调整规模"但随后x / y平移(计算得到光标下的点保持固定)是错误的。我该如何修复翻译?

1 个答案:

答案 0 :(得分:0)

解决方案是重新计算保持该点固定所需的平移,但是对于修改后的比例。对于给定的翻译 T 和缩放 s ,固定点 F 将映射到

  

(1) P = T + s F

因此当 P 在将缩放从 s 更改为 s'时保持不变时,我们还需要更改的转换T T'。所以我们的条件是

  

(2) P' = P < => T' + s'F = T + s F

所以我们的新翻译 T'计算为

  

(3) T' = T +( s - s' F < / em>的

但实际上我们不知道 F ,因此无法立即计算 T'。但 F 可以从旧的和新的(由缩放行为返回)转换和缩放计算为

  

(4) F =( T' - T )/( s - s “的)。

如果我们现在更改缩放到其他值 s'',我们可以计算修改后的缩放所需的转换 T'' as(使用方程3中的方程4)

  

(5) T'' = T +( s - s'')( T ' - Ť)/(取值 - S'。

现在您可以将 s'' T''设置为缩放行为中的新值

  

your_zoom_behavior.scale(changed_scale);

     

your_zoom_behavior.translate([changed_x_translate,changed_y_translate]);

如您所见, T''只是 T'如果 s'' s' 。如果 s s',那就是 NaN ,也就是说,如果规模实际上没有改变 - 你必须检查这个。< / p>