Drag not working correctly after node transition, D3

Question

I have a force network something similar to this :

http://jsfiddle.net/Brb29/7/

On the button press i translate the nodes to the same position :

function positionnodes(){

     force.stop();
     nodes.each(function(d){
         d.fixed = true;
         d.x = 100;
         d.y = 100;
     }).transition().duration(1000).attr("transform", function(d)
    {

    //console.log(d.hasRelationship);
    //console.log(d.y);
    return "translate(" + 100 + "," + 100 + ")"; 

    });

    edges.transition().duration(1000).attr("x1", function (d) {

        console.log(d.source.x)
        return d.source.x;
    })
    .attr("y1", function (d) {console.log(d.source.y)
        return d.source.y;
    })
    .attr("x2", function (d) {console.log(d.target.x)

        return d.target.x;
    })
    .attr("y2", function (d) {console.log(d.target.y)
        return d.target.y;
    });
    //setTimeout(function(){ force.start();},1000);

}

My problem is, after i do this and i go to drag the nodes, the node position jumps back to its previous even though i have set it. It's as if the dx/dy hasn't updated.

Any ideas ?

Answer 1

The drag event will trigger force.start and then (x,y) of all nodes will be re-computed. To avoid triggering force.start, you need overwrite the event handler for force.drag, see here

OK. Here is a working example: Working Example . The core part is here:

var drag = force.drag()
                .origin(function(d) {
                    var t = 
d3.transform(d3.select(this).attr("transform")).translate;
                    return {x: t[0], y: t[1]};
                })
                .on("drag.force", function(d) {
                    var cord = [0,0];
                    cord = d3.mouse(this);
                    d.x = cord[0];
                    d.y = cord[1];
                    tick();
                });