javascript - cytoscapejs - 在节点主体内嵌入 html

标签 javascript html cytoscape.js cytoscape-web

这可能是一个愚蠢的问题,但是是否可以将 html 放入 cytoscape js 节点中?我浏览过文档,它表明可以将图像放入节点内,但没有提到 html。理想情况下,这样我就可以拥有一组图像以及 float 在图像上方的工具提示。 提前致谢。 乔

最佳答案

您不能将 HTML 内容与 Canvas 混合,这是 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 位置与节点等同步。

关于javascript - cytoscapejs - 在节点主体内嵌入 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29165150/

相关文章:

javascript - 如何在 Meteor Blaze 模板中包含 HTML <template> 元素?

html - Bootstrap 徽章 - 文本未在徽章中居中

javascript - 创建一个 javascript 正则表达式来查找以 # 开头的数字(但不包括 HTML 特殊字符或现有链接)

javascript - jQuery onclick 问题

javascript - Angular 2中的多个复选框

javascript - 单击节点时,Cytoscape.js 无法访问类变量和服务

cytoscape.js - 在 cytoscape.js 中使用边缘权重进行力导向布局 (CoSE)

javascript - Cookie 还是本地存储?

javascript - 将一张图像拖到另一张图像之上 - 就像蛋糕设计工具一样?

javascript - Cytoscape 在事件发生时从元素中删除样式