在强制布局上拖动可防止其他mouseup侦听器 [英] Dragging on force layout prevents other mouseup listeners

问题描述

我想在d3.js强制布局中启用拖动。当拖动一个圆圈并释放鼠标按钮时，我想通过回调调用一个特定的函数，如下所示：

I want to enable dragging in a d3.js force layout. When dragging a circle and release the mouse button, I want to call a specific function via callback, like this:

this.force = d3.layout.force()
    .nodes(this.nodes)
    .size([this.width, this.height]);

// enable dragging
this.circle
    .call(this.force.drag)
    .on("dragend", function() {
        console.log("You should see this, when releasing a circle.");
    })
    .on("mouseup.drag",function(d,i) {
        console.log("Or see this.");
    });

不幸的是，force.drag处理程序不会完全触发/
那么如何在拖动结束时在d3强制布局中执行给定的回调函数？

Unfortunately the event is never fired/consumed completely by the force.drag handler. So how can I execute a given callback function in a d3 force layout at the end of a drag?

推荐答案

您不是在 this.force.drag 上调用dragend
这也取决于你如何定义 this.force.drag 。

myCustomDrag = d3.behavior.drag()
    .on("dragstart", function(d,i){
        //do something when drag has just started
    })
    .on("drag", function(d,i){
        //do something while dragging
    })
    .on("dragend", function(d,i){
        //do something just after drag has ended
    });

在上面的代码中，只需使用 call（myCustomDrag）在您希望此拖动行为存在的元素（此处的圆圈）上。

In the above code, just use call(myCustomDrag) on an element (circle here) on which you want this drag behaviour to be present.

这篇关于在强制布局上拖动可防止其他mouseup侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！