Stop dragging on a force layout

Question

I have a force layout in d3 and I have the following code for an item within my node...

drag = force.drag()
        .on("dragstart", dragstart);
...
circle = node.append("circle")
          .attr("r", 36)
          .on("dblclick", dblclick)
          .call(drag);
...
node.on("mousedown", function(d){
          if(d == lastNode){
              circle.on(".drag", null);
              drag_line
                .attr("class", "link")
                .attr("x1", d.x)
                .attr("y1", d.y)
                .attr("x2", d.x)
                .attr("y2", d.y);
          }
          else{
              lastNode = mousedown_node = d;
          }
          svg.call(disabledZoom);

      })

The problem is that even when I set the drag to null the circle still drags. Can anyone see what I am missing?

What do you mean by "setting drag to null"? Changing the variable won't change the behaviour, you need to reset the event handler functions for that. — Lars Kotthoff, Jun 17 '15 at 17:16
Yes, that's what I was asking for :) For removing drag behaviour, see https://stackoverflow.com/questions/13136355/d3-js-remove-force-drag-from-a-selection — Lars Kotthoff, Jun 18 '15 at 04:09

Cool Blue · Accepted Answer · 2015-06-18T03:33:10.457

1

I think it's a bit confusing but, as you can see in the Wiki the way to disable drag behaviour is like this...

node.on(".drag", null);
//not sure if you have any translations or setting of attributes in 
//your zoom behaviour so maybe this will help also...
node.on(".zoom", null);

edited Jun 18 '15 at 03:33

answered Jun 18 '15 at 00:13

Cool Blue

6,438
6
29
68

This doesn't work for me it is what I had originally – Jackie Jun 18 '15 at 01:28
@Jackie if you post a minimum working example exhibiting the behaviour then I'm sure we can solve your problem. – Cool Blue Jun 18 '15 at 02:31
@Jackie added proper cancellation of zoom behaviour as well in case that is causing drag. – Cool Blue Jun 18 '15 at 03:34

score 1 · Answer 2 · answered Jun 18 '15 at 07:33

1

Or you just set a boolean var to false when you don't want to drag anymore. So you can easily change back to a working drag later on as well. So in your drag function you have:

function drag(){
    if (bool){
        //do the dragging stuff
    }
}

answered Jun 18 '15 at 07:33

kwoxer

3,734
4
40
70

Stop dragging on a force layout

2 Answers2