如何完全去除 springy.js 和 raphael 的边缘？

Question

我正在尝试使用 springy 和 raphael 做一个 javascript 应用程序。事实上，我分叉了 demo-raphael.html （可从官方弹性代码获得） https://github.com/dhotson/springy/blob/master/demo-raphael.html

我想要做的是拥有 2 个主节点 A 和 B 以及 10 个其他节点（C、D、E、...）。这 10 个节点可以连接到 A 或 B。（但不能同时连接到两者）如果我确实选中了一些复选框，一些节点可以更改它们的连接并转到另一个主节点。

所以我所做的似乎有效，除了她在例如 A 和 C 之间的线没有被删除。当复选框更新时，我做运行:

我假设 A 已连接到 C，我想断开它并将 B 连接到 C。我们将这条边称为 EC。所以我运行

graph_removeEdge(EC);
delete EC;
EC = graph.newEdge(C, B, {color: '#00A0B0'});

代码似乎可以工作，因为 B 和 C 已连接，而 A 和 C 不再连接。但我仍然可以看到 A 和 C 之间的线的旧图片（它不再移动，但它仍然存在）

我怎样才能删除它？

我也尝试过不删除和创建这个 EC 边缘，而是尝试通过更改他的目标节点来更新它，但没有任何反应。代码：

EC.target = B;

还有一个问题是如何设置 A 和 B 之间的最大距离。因为它们可以非常接近。

非常感谢您的帮助。

Answer 1

好的，我遇到了问题： springy 正在创建节点和边，但它也创建了与该边关联的拉斐尔路径。所以在破坏边缘之前必须删除这条路径

EC.connection.fg.remove();
graph_removeEdge(EC);

注意：第二个关于A和B之间设置最大距离的问题：在springuy库中不修改是不行的，因为A和B之间没有link，所以我们不能设置a距离。唯一的解决办法就是给每个节点加一个flag，有这个flag的节点才会被分发。当然，这个要在springuy.js中修改实现，大概在这个函数中：

Layout.ForceDirected.prototype.tick = function(timestep) {
    this.attractToCentre();
    this.applyHookesLaw();
    this.applyCoulombsLaw();
    this.applyDistanceToFlaggedNode(); // <--- your new function
    this.updateVelocity(timestep);
    this.updatePosition(timestep);
};

如何完全去除 springy.js 和 raphael 的边缘？

How to fully remove edge from springy.js and raphael?

javascript

raphael

springy.js