cytoscapejs - 在节点体内嵌入html

时间:2015-03-20 11:10:53

标签: javascript html cytoscape.js cytoscape-web

这可能是一个愚蠢的问题,但是可以将html放在cytoscape js节点中吗?我已经通过了文档,它表明可以将图像放在节点中,但对html没有任何说明。理想情况下,我可以拥有一组图像以及漂浮在图像上方的工具提示。 提前致谢。 乔

1 个答案:

答案 0 :(得分:3)

您无法将HTML内容与画布混合,画布是Cytoscape.js使用的基础渲染技术。您可以使用SVG图像,SVG与HTML DOM非常相似,可以使用JS库进行操作 - 尽管SVG中的布局主要是手动的。

选项:

(1)使用SVG。您可以抓取SVG内容,对其进行URL编码(使用encodeURI()),并将其用作背景图像,例如:

data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="7px"><g><g><polygon points="8.433,-0.06 4.985,3.325 1.539,-0.06 -0.066,1.546 4.985,6.566 10.037,1.546" fill="%2361B23B"/></g></g></svg>

您需要data:image/svg+xml;utf8,前缀,例如。

(2)构建一个extension,将div放在每个节点的顶​​部。您必须在扩展中进行一些组织,以将div位置与节点等同步。