如何在D3中添加一个强制拖动事件，使节点留在我离开它？ [英] How to add a force drag event in D3 and make the node stay where i leave it?

问题描述

我有一个D3 api显示节点之间的一些关系。我想应用force.drag（）事件在这里，我将拖动节点在一个位置，离开节点，它会保持在那里。我有一个工作fiddle这里，这是显示的节点之间的关系。任何人可以帮助我从这里做这个事件在这个api？ ..

这是小提琴

  var node = vis 
 .selectAll（g.node）
 .data（data.nodes）
 .enter（）
 .append（svg：g）
 .attr （class，node）
 .call（force.drag）; 
  

http://jsfiddle.net/vuCAx/

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

  var drag = force.drag（）
 .on（dragstart，dragstart）; 
 
 var node = vis.selectAll（g.node）。data（data.nodes）.enter（）。append（
svg：g）。attr ，node）。call（drag）; 
 
 function dragstart（d）{
 d.fixed = true; 
} 
  

请参阅： Sticky Force Layout

更新小提琴： http://jsfiddle.net/vuCAx/1/

文档： force.drag（）

如果希望拖动的节点在拖动后保持固定，请在dragstart上将
fixed属性设置为true，如粘性强制布局
示例中所示。

i have a D3 api which is showing some relationship between the nodes .I want to apply force.drag() event here where I will drag the node in a position and leave the node and it will stay there.I have a working fiddle here,which is showing the relationship among the nodes.can anyone help me from here to do this event in this api? ..

this is the fiddle

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

http://jsfiddle.net/vuCAx/

I think the changes should be made here

解决方案

The solution involves setting the 'fixed' node property to true on dragstart.

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

See here: Sticky Force Layout

Updated Fiddle: http://jsfiddle.net/vuCAx/1/

Documentation: 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.

这篇关于如何在D3中添加一个强制拖动事件，使节点留在我离开它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！