角度4 + D3v4:拖动圆圈不能与缩放一起正常工作

Question

我正在尝试在Angular 4应用程序中创建一个D3强制导向图(https://github.com/d3/d3/blob/master/API.md#forces-d3-force).

它通过它的自我渲染正确拖动,缩放和平移工作是自己的,但是当你同时使用它们(拖动和缩放)时,它会停止工作不正确.

我拖动一个圆圈,当我停止拖动时,看起来圆圈仍然被选中并继续拖动.

我已经创建了一个示例项目,代码可以在这里找到:https://github.com/danielamigos/angular-graphs

要查看它的实际效果,请访问:https://danielamigos.github.io/angular-graphs/dist/index.html

Answer 1

正如rioV8提到的，这个问题是节点平移和平移画布同时工作。所以解决方案是，当拖动节点时，停止平移画布。这可以通过在拖动节点时停止事件的传播来完成。因此，在dragstarted(d)事件处理程序中，在开头添加这行代码：

d3.event.sourceEvent.stopPropagation();