使用initMouseEvent拖动d3/cola编程节点

Question

我需要在浏览器中模拟鼠标拖动事件来拖动d3力节点。我用它来解决webcola force布局解算器的一个约束bug。

可口可乐主页：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));