Angular 4 + D3v4 : dragging circle not working correctly in conjunction with zooming

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 提到的，这个问题是节点平移和平移 Canvas 同时工作。所以解决方案是，当拖动一个节点时，停止平移 Canvas 。这可以通过在我们拖动节点时停止事件的传播来完成。所以在dragstarted(d)事件处理程序中，在开头加入这行代码:

d3.event.sourceEvent.stopPropagation();