javascript - 如何在 D3 中添加强制拖动事件并使节点停留在我离开的位置？

Question

我有一个 D3 api，它显示了节点之间的某种关系。我想在这里应用 force.drag() 事件，我将把节点拖到一个位置并离开节点，它会留在那里。我有一个在这里工作 fiddle ，它显示了节点之间的关系。任何人都可以从这里帮助我在这个 api 中做这个事件吗？ ..

这是 fiddle

var node = vis
  .selectAll("g.node")
  .data(data.nodes)
  .enter()
  .append("svg:g")
  .attr("class", "node")
  .call(force.drag);

http://jsfiddle.net/vuCAx/

我觉得这里应该改一下

Answer 1

解决方案涉及在 dragstart 上将“固定”节点属性设置为 true。

var drag = force.drag()
    .on("dragstart", dragstart);

var node = vis.selectAll("g.node").data(data.nodes).enter().append(
    "svg:g").attr("class", "node").call(drag);

function dragstart(d) {
  d.fixed = true;
}

参见此处:Sticky Force Layout

更新 fiddle :http://jsfiddle.net/vuCAx/1/

文档:force.drag()

If you want dragged nodes to remain fixed after dragging, set the fixed attribute to true on dragstart, as in the sticky force layout example.