为什么在v2未实现缩放时d3.js v3会破坏我的力图？

Question

我有一个使用d3.js创建的力布局

我想同时具有可拖动力布局的正常功能和缩放功能。

我基本上已经从（ http://jsfiddle.net/nrabinowitz/QMKm3/ ）复制/粘贴了缩放代码。 这与Mike Bostock在（ http://bl.ocks.org/mbostock/3680957 ）中使用的缩放方法相同。

这是我的代码： http : //jsfiddle.net/kM4Hs/6/

缩放效果很好，但是我无法在力布局中选择单个节点并将其拖动。

我发现罪魁祸首是两个作者都使用d3.v2.js而不是较新的d3.v3.js。 当我将导入更改为v2时，它可以完美运行。 但是，如果可能，我想使用v3。

<script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>

与

<script type='text/javascript' src='http://d3js.org/d3.v2.min.js'></script>

为什么在v2没出现时，v3会破坏力的布局，更重要的是，我该怎么做才能解决？

提前致谢！

Answer 1

如果仔细阅读发行说明 ，则会看到有关在最终版本2.x（2.10.3）和最新版本3.2.7之间发生更改的所有内容的完整说明。 特别是从3.2.2版开始：

通过不阻止默认行为或停止传播，可以更好地处理d3.behavior.drag，d3.behavior.zoom和d3.svg.brush中的拖动手势。 例如，mousedown现在可以更改焦点，iframe外部的mouseup可以正常工作，而touchstart不会结结巴巴。

因此，在V2​​中，通过停止缩放事件的传播，拖动行为可以比缩放行为具有更高的优先级。 在V3中，这种情况不再自动发生，您可以选择优先考虑哪种行为以及何时进行。

如果要在拖动节点时优先考虑拖动行为，则需要在拖动时在输入事件上停止传播 ，以使这些事件不会同时被缩放行为解释为平移。 在dragstart上停止传播就足够了：

var drag = d3.behavior.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
    .on("drag", function() { /* handle drag event here */ });

如果使用强制布局，则代码为：

var drag = force.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });

工作示例：

注意：将这两种行为结合起来意味着手势解释是模棱两可的并且对位置高度敏感。 单击一个圆圈可解释为拖动该圆圈，而单击一个像素则可解释为平移背景。 组合这些行为的更可靠的方法是采用模态。 例如，如果用户按住SPACE键，则无论单击位置如何，单击和拖动都将解释为平移，而不是拖动。 这种方法通常用于商业软件（例如Adobe Photoshop）中。