如何在D3中添加一个强制拖动事件,并使节点停留在我离开它的地方

How to add a force drag event in D3 and make the node stay where i leave it?

本文关键字:节点 事件 停留在 我离开 拖动 添加 D3 一个      更新时间:2023-09-26

我有一个D3api,它显示了节点之间的一些关系。我想在这里应用force.drag()事件,我将把节点拖到一个位置,然后离开节点,它将留在那里。我在这里有一个工作小提琴,它显示了节点之间的关系。有人能帮助我在这个api中完成这个事件吗。。

这是小提琴

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

http://jsfiddle.net/vuCAx/

我认为应该在这里进行更改

解决方案包括在dragstart上将"fixed"节点属性设置为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;
}

参见此处:粘性力布局

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

文档:force.drag()

如果希望拖动后拖动的节点保持固定,请将在dragstart中将属性固定为true,如粘性力布局实例