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

Question

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

• 能够根据JSON数据显示节点图表（Cytoscape.js支持开箱即用）。

• 支持通过从画布外部的托盘拖动并将其放在画布上来创建新节点（Cytoscape-node-add稍微支持此用例）

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

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

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

• 是否可以为每个节点提供HTML代码段？例如，取决于每个节点的'type'属性（在json中指定），我想在每个节点上显示图像，显示一些文本等。文档提到了background-image节点，但这并不是我想要的。

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

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

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

任何对这些方面的帮助都会非常感激。

由于

Answer 1

（1）您无法在画布中呈现HTML，但Cytoscape确实支持节点上的SVG背景图像。所以你可以把那些想要在节点上绘制的内容放在那里。

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