Drag не работает должным образом после перехода узла, D3

Question

У меня есть сила сети что-то похожее на это:

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

На нажатие кнопки Перевожу узлы в таком же положении:

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); 

} 

Моя проблема в том, что после того, как я это сделаю, и я перетаскиваю узлы, позиция узла возвращается к предыдущей, даже если я ее установил. Это как если бы d.x/d.y не обновлялся.

Любые идеи?

Answer 1

Событие перетаскивания вызовет force.start, а затем (x, y) всех узлов будет пересчитано. Чтобы избежать срабатывания force.start, вам нужно перезаписать обработчик событий для force.drag, см. here

OK. Вот рабочий пример: Working Example. Основная часть находится здесь:

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(); 
       });