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

问题描述：

我使用cytoscape.js来显示节点之间的关系。我想为一个节点创建不同的时尚标签。我想要更复杂的时尚标签，然后在cytoscape.org official example。如何将html标签添加到cytoscape图形节点

我该怎么办？我的问题

样品图片： Sample image of my problem

答

首先，必须有绘制图形的区域。为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>

接下来，图形区域的样式必须通过CSS略作修改（把一个图形转换为0区div元素是相当无趣）。要完成此操作，请在以下之间添加以下CSS代码：

<style> 
    #cy { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
    } 
</style>

如何使图形看起来更漂亮？ Cytoscape.js为改变图形外观提供了多种样式选项。图中的初始化可以被修改，以更改默认样式选项，如下所示：

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的'label'属性添加。由于已经提供了标签（通过数据的id属性），我们将使用这些标签。如果提供其他数据属性，例如firstname，则可以使用这些属性。

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

Cytoscape.js中图形的最后一个公共组件是布局。像样式，元素和容器一样，布局也被指定为在构建过程中传递给细胞景观的对象的一部分。现有CY对象，添加（后元素）：

layout: { 
    name: 'grid' 
}

检查了这一点，它会帮助你 -http://blog.js.cytoscape.org/2016/05/24/getting-started/

不回答关于标签的复杂样式的问题 –

答

我解决我的问题与extention为Cytoscape的创建HTML标签。

Extention在GitHub上：cytoscape-node-html-label

Extention演示：demo

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; 
 
}

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

相关推荐