【发布时间】:2015-05-23 18:44:33
【问题描述】:
这可能是一个愚蠢的问题,但是否可以将 html 放在 cytoscape js 节点中?我浏览过文档,它表明可以将图像放在节点内,但对 html 只字未提。理想情况下,我可以拥有一组图像以及漂浮在图像上方的工具提示。 提前致谢。 乔
【问题讨论】:
-
“到目前为止你有什么?”
标签: javascript html cytoscape.js cytoscape-web
这可能是一个愚蠢的问题,但是否可以将 html 放在 cytoscape js 节点中?我浏览过文档,它表明可以将图像放在节点内,但对 html 只字未提。理想情况下,我可以拥有一组图像以及漂浮在图像上方的工具提示。 提前致谢。 乔
【问题讨论】:
标签: javascript html cytoscape.js cytoscape-web
您不能将 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 位置与节点等同步。
【讨论】: