如何完全删除 d3 forceSimulation 及其拖动处理程序

Question

我希望允许用户使用d3 forceSimulation 或CoLa layout 查看他们的网络，这意味着当用户触发事件时，我需要更改哪些布局算法正在更新x 和y 我的节点和边的属性。

特别是，这要求我能够停止模拟并防止它们更新我提供给它们的数据上的那些属性，而另一个是“活动的”——以及删除与它们关联的拖动处理程序。

我的渲染函数目前有：

if (use_cola) {

  // MUST TURN OFF D3 AND ITS DRAG HANDLERS!

  force = cola_force.nodes(graph.nodes)
    .links(links)
    .groups(groups[group_nodes_by])
    .jaccardLinkLengths(repulsion_strength, 0.7)
    .avoidOverlaps(true)
    .start(50, 0, 50);

  node.call(cola_force.drag);
  group.call(cola_force.drag);

  cola_force.on('tick', ticked);

} else {  // d3

  // MUST TURN OFF COLA AND ITS DRAG HANDLERS!

  force = d3_force.nodes(graph.nodes)
    .force("link", d3.forceLink(links))
    .force("charge", d3.forceManyBody().strength(-repulsion_strength))
    .force("center", d3.forceCenter(w / 2, h / 2));

  node.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));  // where those are the conventional functions

  d3_force.on('tick', ticked);
}

一种解决方案可能是破坏这些对象，例如delete d3_force['something_important']

更简单的方法可能会起作用，例如d3_force.nodes([]) 或类似的东西。

我不确定如何做类似于拖动处理程序的事情，因为我不太熟悉它们的工作原理。

更新 1：

为 d3 拖动处理程序（在 d3v3 中）here 建议的部分解决方案@：

var dragCallback = d3.select('rect#no-drag').property('__onmousedown.drag')['_'];

d3.select('rect#no-drag').on('mousedown.drag', null);

然后再恢复它：

d3.selectAll('rect#no-drag').on('mousedown.drag', dragCallback);

Answer 1

你需要做两件事：

1. 如果它仍在运行，请停止模拟，以防止它弄乱您的节点坐标。这可以通过调用d3_force.stop() 轻松完成。不过，无需先检查它是否正在运行，因为在已经停止的模拟上调用它也不会造成伤害。

   您稍后可以通过调用d3_force.restart() 重新激活模拟，可能会重新注入一些能量来加热它：d3_force.alpha(1).restart()。

2. docs 告诉我们如何摆脱拖拽行为：

   侦听器使用名称.drag，因此您可以随后解绑拖动行为，如下所示：

    selection.on(".drag", null);
   

   在您的情况下，这将是 node.on(".drag", null)。如果用户切换回布局，您可以再次将拖动行为绑定到node 选择。为此，可能值得考虑预先创建拖动行为，并在稍后重新绑定时传递引用。