Javascript 为什么d3.js v3在实现缩放时破坏了我的力图，而v2没有？

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

我希望既有可拖动部队布局的正常功能，也有缩放的能力

我基本上已经从中复制/粘贴了缩放代码。这与Mike Bostock在中使用的缩放方式相同

这是我的密码：

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

我发现罪魁祸首是两位作者都使用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>

为什么v3破坏了强制布局而v2没有，更重要的是，我能做些什么来修复它

提前谢谢

如果您仔细阅读，您将看到对最终版本2.x2.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(); });

工作示例：

---

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

我意识到，在强制布局上执行此操作似乎会通过重新调整一些其他节点/边来覆盖布局响应节点移动的自然方式。我通过让drag方法也更新所有链接，半修复了这个问题，所以修复起来很容易。我搞不清楚的部分是修复原力功能。我尝试在dragended的末尾执行force.resume，但在恢复force功能的同时，它还重置了我拖动的任何节点的位置。我在拖动结束时设置d.fixed=true，因为我希望固定拖动的节点。请查看和文档以了解。我刚刚更新了，谢谢。sticky force布局示例为我节省了大量时间！有人知道为什么在webkit中缩放效果很好，但在firefox中，收缩手势会增加整个页面的缩放因子吗？我试图用元视口属性来解决这个问题，但是没有用。我也遇到了强制布局的问题。通过阅读@mbostock发布的链接，我的答案是从force.drag而不是d3.behavior.drag创建var drag