javascript 为什么 d3.js v3 在 v2 没有实现缩放时会破坏我的力图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17953106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does d3.js v3 break my force graph when implementing zooming when v2 doesn't?
提问by Matthew Herbst
I have a force layout that I have created using d3.js
我有一个使用 d3.js 创建的力布局
I would like to have both the normal functionality of a draggable force layout as well as the ability to zoom.
我想同时拥有可拖动力布局的正常功能以及缩放功能。
I have basically copy/pasted the zooming code from (http://jsfiddle.net/nrabinowitz/QMKm3/). This is the same way of zooming that Mike Bostock uses in (http://bl.ocks.org/mbostock/3680957).
我基本上已经从（http://jsfiddle.net/nrabinowitz/QMKm3/）复制/粘贴了缩放代码。这与 Mike Bostock 在 ( http://bl.ocks.org/mbostock/3680957) 中使用的缩放方式相同。
Here is my code: http://jsfiddle.net/kM4Hs/6/
这是我的代码：http: //jsfiddle.net/kM4Hs/6/
The zooming works fine, but I am unable to select single nodes in the force layout and drag them around.
缩放工作正常，但我无法在强制布局中选择单个节点并将它们拖动。
I have found the culprit to be the fact that both authors use d3.v2.js rather than the newer d3.v3.js. When I change my import to v2 it works perfectly. However, I would like to use v3 if possible.
我发现罪魁祸首是两位作者都使用 d3.v2.js 而不是较新的 d3.v3.js。当我将导入更改为 v2 时，它运行良好。但是，如果可能，我想使用 v3。
<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>
versus
相对
<script type='text/javascript' src='http://d3js.org/d3.v2.min.js'></script>
why does v3 break the force layout when v2 doesn't, and more importantly, what can I do to fix it?
为什么当 v2 没有时 v3 会破坏力布局，更重要的是，我该怎么做才能修复它？
Thanks in advance!
提前致谢！
回答by mbostock
If you peruse the release notes, you'll see a full explanation of everything that's changed between the final release of 2.x (2.10.3) and the most recent release, 3.2.7. In particular, from release 3.2.2:
如果您仔细阅读发行说明，您将看到 2.x 的最终版本 (2.10.3) 和最新版本 3.2.7 之间所有更改的完整说明。特别是从 3.2.2 版开始：
Better handling of drag gestures in d3.behavior.drag, d3.behavior.zoom and d3.svg.brush by not preventing default behaviors or stopping propagation. For example, mousedown now changes focus, mouseup outside an iframe works correctly, and touchstart does not stutter.
通过不阻止默认行为或停止传播，更好地处理 d3.behavior.drag、d3.behavior.zoom 和 d3.svg.brush 中的拖动手势。例如，mousedown 现在可以更改焦点，iframe 外的 mouseup 可以正常工作，并且 touchstart 不会断断续续。
So, in V2, the drag behavior could take priority over the zoom behavior by stopping propagation on zoom events. In V3, this no longer happens automatically, giving you the choice of which behavior takes priority, and when.
因此，在 V2 中，通过停止缩放事件的传播，拖动行为可以优先于缩放行为。在 V3 中，这不再自动发生，让您可以选择哪种行为优先以及何时优先。
If you want to give the drag behavior priority when dragging nodes, then you need to stopPropagationon input events while draggingso that these events are not simultaneously interpreted as panning by the zoom behavior. Stopping propagation on dragstart is sufficient:
如果您想在拖动节点时给予拖动行为优先级，那么您需要在拖动时停止对输入事件的传播，以便这些事件不会同时被缩放行为解释为平移。在 dragstart 上停止传播就足够了：
var drag = d3.behavior.drag()
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
.on("drag", function() { /* handle drag event here */ });
If using a force layout, the code is:
如果使用强制布局，代码为：
var drag = force.drag()
.on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });
Working example:
工作示例：
Note: combining these two behaviors means that gesture interpretation is ambiguous and highly sensitive to position. A click on a circle is interpreted as dragging that circle, whereas a click one pixel away could be interpreted as panning the background. A more robust method of combining these behaviors is to employ modality. For example, if the user holds down the SPACE key, clicking and dragging is interpreted as panning, rather than dragging, regardless of the click location. This approach is commonly employed in commercial software such as Adobe Photoshop.
注意：结合这两种行为意味着手势解释是不明确的并且对位置高度敏感。单击一个圆圈被解释为拖动该圆圈，而单击一个像素远可以解释为平移背景。组合这些行为的更稳健的方法是使用模态。例如，如果用户按住 SPACE 键，无论单击位置如何，单击和拖动都会被解释为平移，而不是拖动。这种方法通常用于商业软件，如 Adobe Photoshop。
