使用图论/网络库在节点的背景上绘制图标

Draw icon on node's background using a graph theory / network library

本文关键字：节点 背景 图标 绘制 网络      更新时间：2023-09-26

我有数据，我想在网络浏览器中将其表示为图形。据我所知 - 现在这不是问题。但是，我希望能够为每个节点动态绘制内容 - 一个图标。

此图片/图标取决于节点的特征，不能存储为预设图像 - 应在我们构建图形时绘制。我已经实现了在画布中绘制图标（也许这不是一个好主意 - 我们会看到），但我不确定如何在节点上绘制图标。 我尝试了D3和Cytoscape.js。

图标的简化示例可以是带有多个点的矩形。此数字和点的位置在节点上指定。

如何使用 D3 或 Cytoscape 等将画布上的图像绘制到节点的背景.js？

Cytoscape 原生支持背景图像.js有许多选项。 对于您的用例，这很容易：

（1） 将图像从画布导出为 PNG 或 JPG：canvas.toDataURL("image/png");

（2） 在 Cytoscape 中以节点的样式设置background-image.js使用您从画布获取的数据 URI：http://js.cytoscape.org/#style/background-image

您也可以对 SVG 图像执行相同的操作。 您甚至可以使用 svg 等库.js轻松构建 SVG。 同样，只需获取 SVG 的数据 URI 并将其指定为背景图像。

如果您也想在样式表中保持图像生成井井有条，则可以使用映射器函数。

相关文章：