简体繁体 English

D3中的嵌套缩放问题

[英]Nested zooms issue in D3

原文 2013-10-08 13:51:05 4 1 javascript/ svg/ d3.js

Please see my fiddle: http://jsfiddle.net/haiphong/BRjFE/ 请看我的小提琴： http : //jsfiddle.net/haiphong/BRjFE/

You can hold SHIFT and then drag and drop the rectangle to move it and the circle inside it around. 您可以按住SHIFT，然后拖放矩形以移动矩形及其内部的圆。 You can hold SHIFT and zoom as well. 您也可以按住SHIFT和缩放。 This zoom/pan is done by d3.behavior.zoom() . 此缩放/平移是由d3.behavior.zoom()完成的。 Works well. 效果很好。

I want to zoom and pan the circle when NOT holding shift. 不按住shift时，我想缩放和平移圆圈。 So, I create another d3.behavior.zoom() . 因此，我创建了另一个d3.behavior.zoom() 。 However, the circle can be zoomed but not panned. 但是，圆圈可以缩放但不能平移。 By debugging, I see that when I pan the circle, the handling code doesn't execute. 通过调试，我发现平移圆圈时不会执行处理代码。

In sum, when binding a zoom to both the outer g element and the inner g element, the outer works well for zoom/pan; 总而言之，将zoom同时绑定到外部g元素和内部g元素时，外部元素可以很好地进行缩放/平移。 however, the inner only works for zoom. 但是，内部仅适用于缩放。 How to get it work for pan as well? 如何使它也适用于平底锅？

1 个解决方案

I found the solution for my answer. 我找到了答案的解决方案。 http://jsfiddle.net/haiphong/BRjFE/4/ http://jsfiddle.net/haiphong/BRjFE/4/

When I pan the circle, its zoom event doesn't fire. 当我平移圆圈时，其zoom事件不会触发。 However, its zoomstart event fires and it is fired before its parent's zoomstart . 但是，会触发其zoomstart事件，并且会在其父级的zoomstart之前触发它。 Somehow, when the parent's zoomstart fires, it eats the circle's event. 不知何故，当父母的zoomstart触发时，它将吞噬该圈子的事件。

So, in the zoomstart of the circle, I force the event stop propagating when SHIFT isn't being hold. 因此，在圆圈的zoomstart中，当不按住SHIFT时，我强制事件停止传播。 That makes the circle zoom fires. 这使圆zoom射击。