Javascript 如何将html标签添加到cytoscape图形节点_Javascript_Html_Css_Cytoscape.js

Javascript 如何将html标签添加到cytoscape图形节点

javascript html css

Javascript 如何将html标签添加到cytoscape图形节点,javascript,html,css,cytoscape.js,Javascript,Html,Css,Cytoscape.js,我使用cytoscape.js来显示节点之间的关系。我想为一个节点创建不同的时尚标签。我想要更复杂的时尚标签，然后在我怎么做我的问题的示例图像：首先，必须有一个区域来绘制图形。向index.html添加一个标记，然后在body部分中添加一个名为“cy”的div元素，如下所示：。这将创建网页主体，而网页主体又包含一个名为cy的div元素。命名该元素后，可以方便地访问和修改该元素，以设置样式并传递到Cytoscape.js index.html现在应该如下所示： <!doctype

我使用cytoscape.js来显示节点之间的关系。我想为一个节点创建不同的时尚标签。我想要更复杂的时尚标签，然后在

我怎么做

我的问题的示例图像：

首先，必须有一个区域来绘制图形。向index.html添加一个标记，然后在body部分中添加一个名为“cy”的div元素，如下所示：。这将创建网页主体，而网页主体又包含一个名为cy的div元素。命名该元素后，可以方便地访问和修改该元素，以设置样式并传递到Cytoscape.js

index.html现在应该如下所示：

<!doctype html>
<html>
<head>
    <title>Tutorial 1: Getting Started</title>
    <script src='cytoscape.js'></script>
</head>

<body>
    <div id="cy"></div>
</body>
</html>

下一步是在图形中显示标签，以便可以识别节点。标签是通过style的“label”属性添加的。由于已经提供了标签（通过数据的id属性），我们将使用这些标签。如果提供了其他数据属性，例如firstname，则可以使用这些属性

style: [
    {
        selector: 'node',
        style: {
            shape: 'hexagon',
            'background-color': 'red',
            label: 'data(id)'
        }
    }]

Cytoscape.js中图形的最后一个常见组件是布局。与样式、元素和容器一样，布局也被指定为在构建期间传递给cytoscape的对象的一部分。向现有cy对象添加（在元素之后）：

看看这个，它将帮助您-

我解决了扩展为cytoscape创建html标签的问题

github上的扩展：

扩展演示：

cy.nodehtmlabel(
[
{
查询：'节点'，
第三方物流：功能（数据）{
返回“第1行
第2行”
}
]
);
.line1{
字体大小：10px；
}
.line1{
字体大小：12px；
}这并没有回答关于标签复杂样式的问题。无论如何，还是要感谢您的解释。我在找。你还有cytoscape popper（）。但是有人知道怎么用打字脚本吗？
var cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    { data: { id: 'a' } },
    { data: { id: 'b' } },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b'
      }
    }],
    style: [
        {
            selector: 'node',
            style: {
                shape: 'hexagon',
                'background-color': 'red'
            }
        }]      
});

style: [
    {
        selector: 'node',
        style: {
            shape: 'hexagon',
            'background-color': 'red',
            label: 'data(id)'
        }
    }]

layout: {
    name: 'grid'
}