Cytoscape 的自定义节点渲染器 + 限制拖动点

Question

我正在开发一个基于 Web 的图形可视化/操作工具，我正在为此目的评估一系列 JS 库，包括 Cytoscape.js、jsPlumb、visjs。一些高级要求包括：

• 能够显示基于 JSON 数据的节点图（由 Cytoscape.js 开箱即用支持）。

• 支持通过从画布外的调色板拖放到画布上来创建新节点（Cytoscape-node-add 在某种程度上支持此用例）

• 能够通过单击源节点中的特定点并将连接拖动到目标节点上的特定点来连接节点。 （主要支持使用扩展 Edge-Editation 和 Edge-handles）

• 一个很好的“事件”系统，让封闭系统知道什么时候发生了有趣的事情（例如，创建/删除了一个新节点，用户选择了一个节点，用户移动了节点等）

  李>

我真的很喜欢我在 Cytoscape 文档中读到的内容，并且演示表明这是一个非常强大的库。但是，我有以下问题：

• 是否可以为每个节点提供一个 HTML sn-p 来呈现？例如，根据每个节点的“类型”属性（在 json 中指定），我想在每个节点上显示图像、显示一些文本等。文档提到了background-image 一个节点，但这并不是我想要的。

• 是否可以限制用户可以开始拖动的节点上的点，以连接不同的节点？我意识到Edge-Editation 扩展已经提供了一些支持，但是使用它，用户可以从节点上的任何点开始拖动。此外，在连接两个节点后，如果用户在画布周围拖动节点，则边缘会围绕节点的边界移动。我想限制这种行为，以便边缘始终连接到源/目标节点上的同一点。

鉴于具体要求，我猜我必须编写自己的 Cytoscape 扩展来完成这些事情。但我想知道是否有可以重复使用或重新利用的东西。

这是我想要实现的粗略草图。

我们将不胜感激。

谢谢

Answer 1

(1) 您不能在画布中呈现 HTML，但 Cytoscape 确实支持节点上的 SVG 背景图像。因此，您可以通过这种方式将想要绘制的任何内容放在节点上。

(2) 如果您想更好地控制手柄的位置，您可以在其中一个边缘编辑扩展上进行 PR。他们在这方面已经有了一些可定制性，但听起来你想要更多。