在d3强制布局中只设置一个节点(根)注释可拖动

Set only one node (root) note to be draggable in d3 force layout

本文关键字：节点 一个 d3 注释 拖动 布局 设置      更新时间：2023-09-26

我正在制作d3力布局图，看起来很像这样。我想要的是根节点是固定的，不可拖动的。我通过添加

固定了json文件中的根节点
"fixed": true

，但它仍然是可拖动的。在我的JS文件中有代码

var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .call(force.drag);

如果我删除这段代码的最后一行，整个图形就不再是可拖动的了。我认为"力"是一个全局变量，决定了整个图形是可拖动的。但我只想让根节点不可拖拽而它应该是可拖拽的。我该怎么做呢?

您必须从希望保持固定的节点上删除拖动事件。

下面是一个例子:http://jsfiddle.net/qvco2Ljy/112/

我已经通过数据循环给第一个元素一个固定属性和一个donotmove属性，因为当你拖拽并放开时，也许你想要节点保持固定(我的意思是对于子节点)，所以在这里使用d.fixed会导致冲突:

graph.nodes.forEach(function(d, i) {
  d.donotmove = false;
  if (i == 0) {d.donotmove = true; d.fixed = true;}
})

当调用拖动事件时，检查donotmove属性，如下所示:

var drag = d3.behavior.drag()
  .origin(function(d) {
    return d;
  })
  .on("dragstart", function(d) {
    if (d.donotmove) return;
    dragstarted(d)
  })
  .on("drag", function(d) {
    if (d.donotmove) return;
    dragged(d)
  })
  .on("dragend", function(d) {
    if (d.donotmove) return;
    dragended(d)
  })

希望有帮助

相关文章：