Cytoscape 的自定义节点渲染器 + 限制拖动点
Custom node renderer for Cytoscape + restrict drag points
我正在开发一个基于网络的图形 visualization/manipulation 工具，并且我正在评估一堆 JS 库，包括 Cytoscape.js, jsPlumb, visjs 为此目的。一些高级要求包括：
- 能够显示基于 JSON 数据的节点图（开箱即用 Cytoscape.js 支持）。
支持通过从 canvas 外部的托盘拖放到 canvas 上来创建新节点（Cytoscape-node-add 在某种程度上支持此用例）
能够通过单击源节点中的特定点并将连接拖动到目标节点上的特定点来连接节点。 （主要支持使用扩展 Edge-Editation and Edge-handles）
一个很好的'event'系统，让封闭系统知道什么时候发生了有趣的事情（例如，一个新节点是created/dropped，用户选择了一个节点，用户移动了节点等等)
我真的很喜欢我在 Cytoscape 文档中读到的内容，演示表明这是一个非常强大的库。但是，我有以下问题：
是否可以为每个节点提供 HTML 片段来呈现？例如，根据每个节点的 'type' 属性（在 json 中指定），我想在每个节点上显示图像、显示一些文本等。该文档提到了节点的 background-image ，但这并不是我要找的。
是否可以限制用户可以开始拖动的节点上的点，以连接不同的节点？我意识到 Edge-Editation 扩展已经提供了一些支持，但是使用它，用户可以从节点上的任何点开始拖动。此外，在连接两个节点后，如果用户在 canvas 周围拖动节点，边缘会围绕节点的边界移动。我想限制这种行为，以便边缘始终附加到 source/target 节点上的同一点。
考虑到具体要求，我猜我必须编写自己的 Cytoscape 扩展来完成这些事情。但我想知道是否有什么东西可以重复使用或改变用途。
这是我想要实现的目标的粗略草图。
如能提供任何帮助，我们将不胜感激。
谢谢
(1) 您无法在画布中渲染 HTML，但 Cytoscape 确实支持节点上的 SVG 背景图像。所以你可以把你想画的任何内容都放在节点上。
(2) 如果您想更好地控制手柄位置，可以在其中一个边缘编辑扩展上进行 PR。他们在这方面已经有一些可定制性，但听起来你想要更多。
我正在开发一个基于网络的图形 visualization/manipulation 工具，并且我正在评估一堆 JS 库，包括 Cytoscape.js, jsPlumb, visjs 为此目的。一些高级要求包括：
- 能够显示基于 JSON 数据的节点图（开箱即用 Cytoscape.js 支持）。
支持通过从 canvas 外部的托盘拖放到 canvas 上来创建新节点（Cytoscape-node-add 在某种程度上支持此用例）
能够通过单击源节点中的特定点并将连接拖动到目标节点上的特定点来连接节点。 （主要支持使用扩展 Edge-Editation and Edge-handles）
一个很好的'event'系统，让封闭系统知道什么时候发生了有趣的事情（例如，一个新节点是created/dropped，用户选择了一个节点，用户移动了节点等等)
我真的很喜欢我在 Cytoscape 文档中读到的内容，演示表明这是一个非常强大的库。但是，我有以下问题：
是否可以为每个节点提供 HTML 片段来呈现？例如，根据每个节点的 'type' 属性（在 json 中指定），我想在每个节点上显示图像、显示一些文本等。该文档提到了节点的 background-image ，但这并不是我要找的。
是否可以限制用户可以开始拖动的节点上的点，以连接不同的节点？我意识到 Edge-Editation 扩展已经提供了一些支持，但是使用它，用户可以从节点上的任何点开始拖动。此外，在连接两个节点后，如果用户在 canvas 周围拖动节点，边缘会围绕节点的边界移动。我想限制这种行为，以便边缘始终附加到 source/target 节点上的同一点。
考虑到具体要求，我猜我必须编写自己的 Cytoscape 扩展来完成这些事情。但我想知道是否有什么东西可以重复使用或改变用途。
这是我想要实现的目标的粗略草图。
如能提供任何帮助，我们将不胜感激。
谢谢
(1) 您无法在画布中渲染 HTML，但 Cytoscape 确实支持节点上的 SVG 背景图像。所以你可以把你想画的任何内容都放在节点上。
(2) 如果您想更好地控制手柄位置，可以在其中一个边缘编辑扩展上进行 PR。他们在这方面已经有一些可定制性，但听起来你想要更多。