如何在d3.js强制有向图中检测元素拖动

Question

I have a force directed graph in d3.js (Brilliant: big kudos to MB and all involved!). I'd like to somehow be able to detect, and return the index of any node that's currently being dragged.

I know that I can redefine d3.behavior.drag() to attach a callback to the drag event, but I want all the behavior of the native force.drag and it seems clumsy to reduplicate it all just to add this one little bit. In my inexperience, perhaps I'm overlooking some straightforward way to do this?

---

hmm, yes, I should be more explicit. This is what I tried: I've used the example here as my model, modifying it to suit my purposes, and learning d3.js as I go. I defined the nodes thus:

var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
  .enter().append("svg:circle")
    .attr("class", "node")
    .attr("r", 6)
    .on("click", clicked)
    .on("dblclick", dblclick)
    .on("contextmenu", cmdclick)
    .on("drag", draghandler)
    .call(force.drag);

function draghandler(d){
    console.log(d);
    console.log(this);
}

My event handlers for click , dblclick , and contextmenu , work exactly as I expect; however, when I try to add an event handler for drag , it never executes. I imagined that it was failing because I was using it wrong, or in the wrong place, or that because the behavior is governed by force.drag , I would have to redefine that to add the additional behavior I wanted.

Answer 1

The drag event is not fired by circle , it's fired by the the drag behavior ( source ), calling force.drag will return that behavior and you can set a listener there:

force.drag()
  .on("dragstart", function () {
    console.log(arguments);
  })

Demo , see the console's output

Update:

I forked the example link you posted which doesn't use d3.json and it's working fine: demo