如何将html标签添加到cytoscape图节点
kal*_*erg 4 html javascript css cytoscape.js
我使用cytoscape.js来显示节点之间的关系。我想为一个节点创建不同的时尚标签。我想要更复杂的时尚标签，然后在cytoscape.org官方示例中。
我该怎么做？
我的问题的样本图片：
我通过扩展为cytoscape创建html标签解决了我的问题。
在github上的扩展：cytoscape-node-html-label
扩展演示：演示
cy.nodeHtmlLabel(
[
{
query: 'node',
tpl: function(data){
return '<p class="line1">line 1</p><p class="line1">line 2</p>'}
}
]
);.line1{
font-size: 10px;
}
.line1{
font-size: 12px;
}小智 0
首先，必须有一个区域来绘制图形。将标签添加到index.html，然后在主体部分中添加一个名为“cy”的div元素，如下所示：这将创建网页的主体，该主体又包含一个名为 cy 的 div 元素。命名该元素可以方便以后访问和修改该元素以设置样式并传递到 Cytoscape.js。
\n\nindex.html 现在应该如下所示：
\n\n<!doctype html>\n<html>\n<head>\n <title>Tutorial 1: Getting Started</title>\n <script src=\'cytoscape.js\'></script>\n</head>\n\n<body>\n <div id="cy"></div>\n</body>\n</html>\n接下来，必须通过 CSS 稍微修改图形区域的样式（将图形放入 0 区域 div 元素相当无趣）。为此，请在 和 之间添加以下 CSS 代码：
\n\n<style>\n #cy {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n left: 0px;\n }\n</style>\n让图表看起来更好怎么样？Cytoscape.js 提供了多种用于更改图形外观的样式选项。可以修改图表的初始化以更改默认样式选项，如下所示：
\n\nvar cy = cytoscape({\n container: document.getElementById(\'cy\'),\n elements: [\n { data: { id: \'a\' } },\n { data: { id: \'b\' } },\n {\n data: {\n id: \'ab\',\n source: \'a\',\n target: \'b\'\n }\n }],\n style: [\n {\n selector: \'node\',\n style: {\n shape: \'hexagon\',\n \'background-color\': \'red\'\n }\n }] \n});\n接下来是在图中显示标签，以便可以识别节点。标签是通过 style 的 \'label\xe2\x80\x99 属性添加的。由于已经提供了标签（通过数据的 id 属性），我们\xe2\x80\x99将使用它们。如果提供了其他数据属性，例如名字，则可以使用这些属性。
\n\nstyle: [\n {\n selector: \'node\',\n style: {\n shape: \'hexagon\',\n \'background-color\': \'red\',\n label: \'data(id)\'\n }\n }]\nCytoscape.js 中图形的最后一个常见组件是布局。与样式、元素和容器一样，布局也被指定为在构建过程中传递给 cytoscape 的对象的一部分。向现有 cy 对象添加（在元素之后）：
\n\nlayout: {\n name: \'grid\'\n}\n看看这个，它会对你有帮助 - http://blog.js.cytoscape.org/2016/05/24/getting-started/
\n- 这并没有回答有关标签复杂样式的问题 (2认同)