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

Question

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

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

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

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

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

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

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

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

考虑到具体要求，我猜我必须编写自己的 Cytoscape 扩展来完成这些事情。但我想知道是否有一些东西可以重复使用或改变用途。

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

任何有关这些的帮助将不胜感激。

谢谢

Answer 1

(1) 无法在画布中渲染 HTML，但 Cytoscape 确实支持节点上的 SVG 背景图像。所以你可以用这种方式把你想要绘制的任何内容放在节点上。

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