以定向力图交互式修复节点

use*_*220 2 d3.js force-layout

我目前正在处理一个相当简单但很大的力导向图,我希望我的用户能够组织他们认为合适的图形.为此,我想让他们以交互方式修复节点的位置.锁定节点的方法取决于我; 我想要双击节点或按住一个键,同时鼠标悬停/抓住节点.

我不确定如何做到这一点,找不到任何例子,非常感谢一些帮助.

非常感谢你.

vic*_*rsc 8

这是一个示例,您可以单击(或拖动)删除后具有固定位置的节点.

   var node_drag = d3.behavior.drag()
        .on("dragstart", dragstart)
        .on("drag", dragmove)
        .on("dragend", dragend);

    function dragstart(d, i) {
        force.stop() // stops the force auto positioning before you start dragging
    }

    function dragmove(d, i) {
        d.px += d3.event.dx;
        d.py += d3.event.dy;
        d.x += d3.event.dx;
        d.y += d3.event.dy; 
        tick(); // this is the key to make it work together with updating both px,py,x,y on d !
    }

    function dragend(d, i) {
        d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
        tick();
        force.resume();
    }
Run Code Online (Sandbox Code Playgroud)

完整代码在这里.