使用图论/网络库在节点背景上绘制图标
Draw icon on node's background using a graph theory / network library
我有数据，我想在网络浏览器中将其表示为图形。据我所知 - 现在这不是问题。但是，我希望能够 为每个节点动态绘制内容 - 一个图标。
这个picture/icon取决于节点的特性，不能存储为预设图像 - 应该在我们构建图形时绘制。我已经在 canvas 中实现了绘制图标（也许这不是一个好主意 - 我们会看到），但我不确定如何在节点上绘制图标。我试用了 D3 和 Cytoscape.js.
图标的简化示例可以是带有多个点的矩形。这个数字和点的位置在节点上指定。
如何使用 D3 或 Cytoscape.js 等将 canvas 中的图像绘制到节点的背景上？
Cytoscape.js 原生支持背景图片，有很多选项。对于您的用例，这很简单：
(1) 将图像从 canvas 导出为 PNG 或 JPG：canvas.toDataURL("image/png");
(2) 使用您从 canvas 获得的数据 URI 在 Cytoscape.js 中为您的节点设置样式中的 background-image：http://js.cytoscape.org/#style/background-image
您也可以对 SVG 图像执行相同的操作。您甚至可以使用像 svg.js 这样的库来轻松构建您的 SVG。同样，只需获取 SVG 的数据 URI 并将其指定为背景图像。
如果您也想在样式表中组织图像生成，您可以使用 a mapper function。
我有数据，我想在网络浏览器中将其表示为图形。据我所知 - 现在这不是问题。但是，我希望能够 为每个节点动态绘制内容 - 一个图标。
这个picture/icon取决于节点的特性，不能存储为预设图像 - 应该在我们构建图形时绘制。我已经在 canvas 中实现了绘制图标（也许这不是一个好主意 - 我们会看到），但我不确定如何在节点上绘制图标。我试用了 D3 和 Cytoscape.js.
图标的简化示例可以是带有多个点的矩形。这个数字和点的位置在节点上指定。
如何使用 D3 或 Cytoscape.js 等将 canvas 中的图像绘制到节点的背景上？
Cytoscape.js 原生支持背景图片，有很多选项。对于您的用例，这很简单：
(1) 将图像从 canvas 导出为 PNG 或 JPG：canvas.toDataURL("image/png");
(2) 使用您从 canvas 获得的数据 URI 在 Cytoscape.js 中为您的节点设置样式中的 background-image：http://js.cytoscape.org/#style/background-image
您也可以对 SVG 图像执行相同的操作。您甚至可以使用像 svg.js 这样的库来轻松构建您的 SVG。同样，只需获取 SVG 的数据 URI 并将其指定为背景图像。
如果您也想在样式表中组织图像生成，您可以使用 a mapper function。