<分区>
我有数据，我想在网络浏览器中将其表示为图形。据我所知 - 现在这不是问题。但是，我希望能够为每个节点动态绘制内容 - 一个图标。
此图片/图标取决于节点的特性，不能存储为预设图像 - 应该在我们构建图形时绘制。我已经实现了在 Canvas 中绘制图标(也许这不是一个好主意 - 我们会看到)，但我不确定如何在节点上绘制图标。我试用了 D3 和 Cytoscape.js。
图标的简化示例可以是带有许多点的矩形。这个数字和点的位置在节点上指定。
我如何使用 D3 或 Cytoscape.js 等将 Canvas 上的图像绘制到节点的背景上？
最佳答案
背景图像在 Cytoscape.js 中原生支持，有很多选项。对于您的用例，这很简单:
(1) 将 Canvas 中的图像导出为 PNG 或 JPG:canvas.toDataURL("image/png");
(2) 在 Cytoscape.js 中为您的节点设置样式中的 background-image 使用您从 Canvas 获得的数据 URI:http://js.cytoscape.org/#style/background-image
您也可以对 SVG 图像做同样的事情。您甚至可以使用像 svg.js 这样的库轻松构建您的 SVG。同样，只需获取 SVG 的数据 URI 并将其指定为背景图像。
您可以使用 a mapper function如果您也想在样式表中组织图像生成。
关于javascript - 使用图论/网络库在节点背景上绘制图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35089161/