d3/cola 프로그램 노드 드래그 initMouseEvent를 사용하여 드래그

Question

브라우저에서 마우스 끌기 이벤트를 조롱하여 d3 강제 노드를 드래그해야합니다. webcola 강제 레이아웃 해결사 버그에 대한 해결 방법으로 사용하고 있습니다.

콜라 홈 페이지 : http://marvl.infotech.monash.edu/webcola/ 비슷한 질문을하기 전에 물어하지만 내 응용 프로그램을 여기에 How to programmatically trigger a D3 drag event?

에 대해 만족스럽게 대답하지 내가 지금까지 무엇을 가지고 있었다

:

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

마우스를 이벤트는 어떤 수준에서 작동하는 것 같지만 원하는 방식이 아닙니다. 다음 코드에서 기대할 수있는 것은 xTest와 yTest 값이 증가하므로 각 틱에서 각 노드가 x와 y의 몇 픽셀만큼 드래그되어야한다는 것입니다.

대신에 마우스가 결과 프레임으로 이동하면 노드 중 하나만이 예기치 않게 원 안에 이동한다는 것을 알 수 있습니다. 분명히 이러한 가짜 마우스 이벤트를 사용하는 방법을 이해하지 못하고 있습니다.

도움 주셔서 감사합니다.

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 수 있습니다

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