Перетаскивание программных узлов d3/cola с помощью initMouseEvent

Question

Мне нужно высмеять событие перетаскивания мышью в браузере, чтобы перетащить узел силы d3. Я использую это в качестве обходного пути для ограничения ограничения решателя компоновки webcola.

Cola страница: http://marvl.infotech.monash.edu/webcola/

Аналогичный вопрос был задан вопрос раньше, но не ответил удовлетворительно для моего приложения How to programmatically trigger a D3 drag event?

Вот что я до сих пор:

http://jsfiddle.net/7oc0ez6q/14/

мышь события, похоже, работают на каком-то уровне, но не так, как я хочу. То, что я ожидаю от следующего кода, - это то, что на каждом тике каждый узел должен быть перетаскиван несколькими пикселями в x и y, так как значения xTest и yTest увеличиваются.

Вместо этого я вижу, что когда мышь перемещается в рамку результата, только один из узлов неожиданно перемещается по кругу. Очевидно, что я не понимаю, как использовать эти поддельные события мыши.

Благодарим за помощь.

var graph = { 
    "nodes":[ 
     {"name":"a","width":60,"height":40}, 
     {"name":"b","width":70,"height":190}, 
     {"name":"c","width":60,"height":40}, 
     {"name":"d","width":60,"height":80}, 
     {"name":"e","width":60,"height":40} 
    ], 
    "links":[ 
     {"source":1,"target":2}, 
     {"source":2,"target":0}, 
     {"source":2,"target":3}, 
     {"source":2,"target":4} 
    ], 
    "constraints":[ 
     {"type":"alignment", 
     "axis":"x", 
     "offsets":[ 
     {"node":"1", "offset":"0"}, 
     {"node":"2", "offset":"0"}, 
     {"node":"3", "offset":"0"} 
     ]}, 
     {"type":"alignment", 
     "axis":"y", 
     "offsets":[ 
     {"node":"0", "offset":"0"}, 
     {"node":"1", "offset":"0"}, 
     {"node":"4", "offset":"0"} 
     ]} 
    ] 
} 


var width = 350, 
     height = 320 

    var color = d3.scale.category20(); 

    var d3cola = cola.d3adaptor() 
     .linkDistance(120) 
     .avoidOverlaps(true) 
     .size([width, height]); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

     graph.nodes.forEach(function (v) { v.x = 400, v.y = 50 }); 
     d3cola 
      .nodes(graph.nodes) 
      .links(graph.links) 
      .constraints(graph.constraints) 
      .start(10,10,10); 

     var link = svg.selectAll(".link") 
      .data(graph.links) 
      .enter().append("line") 
      .attr("class", "link"); 


     var node = svg.selectAll(".node") 
      .data(graph.nodes) 
      .enter().append("rect") 
      .attr("class", "node") 
      .attr("width", function (d) { return d.width; }) 
      .attr("height", function (d) { return d.height; }) 
      .attr("rx", 5).attr("ry", 5) 
      .style("fill", function (d) { return color(1); }) 
      .call(d3cola.drag); 



     var label = svg.selectAll(".label") 
      .data(graph.nodes) 
      .enter().append("text") 
      .attr("class", "label") 
      .text(function (d) { return d.name; }) 
      .call(d3cola.drag); 

     node.append("title") 
      .text(function (d) { return d.name; }); 

     var xTest=1; 
     var yTest=1; 

     d3cola.on("tick", function() { 

      xTest+=5; 
      yTest+=5; 

      link.attr("x1", function (d) { return d.source.x; }) 
       .attr("y1", function (d) { return d.source.y; }) 
       .attr("x2", function (d) { return d.target.x; }) 
       .attr("y2", function (d) { return d.target.y; }); 

      node.attr("x", function (d) { return d.x - d.width/2; }) 
       .attr("y", function (d) { return d.y - d.height/2; }); 

      label.attr("x", function (d) { return d.x; }) 
       .attr("y", function (d) { 
        var h = this.getBBox().height; 
        return d.y + h/4; 
       }); 

      progDrag(); 

     }); 



function progDrag() { 

    var evObjStart = document.createEvent('MouseEvents'); 
    var evObj = document.createEvent("MouseEvents"); 
    var evObjEnd = document.createEvent("MouseEvents"); 

    node.each(function (el) { 

     console.log(evObj); 

     evObjStart.initMouseEvent("mousedown", true, true, window, 1, xTest, yTest, xTest, yTest, false, false, false, false, 0, null); 
     evObj.initMouseEvent("mousemove", true, true, window, 1, xTest, yTest, xTest, yTest, false, false, false, false, 0, null); 
     //evObjEnd.initMouseEvent("mouseup", true, true, window, 1, xTest, yTest, xTest, yTest, false, false, false, false, 0, null); 

     this.dispatchEvent(evObjStart); 
     this.dispatchEvent(evObj);    
     //this.dispatchEvent(evObjEnd); 

    }); 

} 

Answer 1

Вы можете создать событие пользовательского мыши с помощью следующей функции

function createCustomMouseEvent (type,x,y) { 
    var event = document.createEvent("MouseEvents"); 
    event.initMouseEvent(type, true, (type != "mousemove"), window, 0, x, y, x, y, false, false, false, false, 0, document.body.parentNode); 
    return event; 
} 

и затем d3, чтобы выбрать элемент и направить на MouseDown, MouseMove и MouseUp события программно реализовать функциональность Drag

var node = d3.select('.node').node(); var x = 0.1, y = 0.1; node.dispatchEvent(createCustomMouseEvent('mousedown', x,y,false)); node.dispatchEvent(createCustomMouseEvent('mousemove', x,y,false)); node.dispatchEvent(createCustomMouseEvent('mouseup', x,y,false));