如何將html標籤添加到cytoscape圖形節點

我使用cytoscape.js來顯示節點之間的關係。我想爲一個節點創建不同的時尚標籤。我想要更復雜的時尚標籤，然後在cytoscape.org official example。如何將html標籤添加到cytoscape圖形節點

我該怎麼辦？我的問題

樣品圖片： Sample image of my problem

2017-08-13 kaluginserg

-1

首先，必須有繪製圖形的區域。爲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/

來源

2017-08-13 10:07:58

不回答關於標籤的複雜樣式的問題 –

我解決我的問題與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; 
 
}

來源

2017-08-24 17:39:00 kaluginserg

如何將html標籤添加到cytoscape圖形節點

回答

相關問題