以交互方式固定有向力图中的节点

【问题标题】：Interactively fixing a node in a directed force graph以交互方式固定有向力图中的节点
【发布时间】：2012-07-20 01:11:09
【问题描述】：

我目前正在使用一个相当简单但很大的力有向图，我希望我的用户能够以他们当时认为合适的方式组织该图。为此，我想让他们以交互方式固定节点的位置。锁定节点的方法由我决定；我正在考虑双击节点或在鼠标悬停/抓取节点时按下一个键。

我不确定如何执行此操作，也找不到任何示例，非常感谢一些帮助。

非常感谢。

【问题讨论】：

标签： d3.js force-layout

【解决方案1】：

这是一个示例，您可以单击（或拖动）放置后具有固定位置的节点。

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

完整代码here.

【讨论】：