Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add html label to cytoscape graph node

I use cytoscape.js for show relations between nodes. I want to create different stylish labels for one node. I want more complicate stylish labels, then in the cytoscape.org official example.

How can i do it?

Sample image of my problem: Sample image of my problem

like image 482
kaluginserg Avatar asked Aug 13 '17 09:08

kaluginserg


People also ask

How do I import a Javascript file into cytoscape?

Cytoscape. js network JSON files can be loaded from standard Cytoscape file menu: File → Import → Network …. Both File and URL are supported.

What is passthrough mapping in cytoscape?

Passthrough MappingThe values of network column data are passed directly through to properties. A passthrough mapping is typically used to specify node/edge labels. For example, a passthrough mapping can label all nodes with their common gene names.

How do I change the node shape in cytoscape?

In the style control panel, click on the little triangle next to Shape to expand the selector, then select a column, select discrete mapping as mapping type then select a shape for each category of nodes.


1 Answers

I solved my problem with extention for create html labels for cytoscape.

Extention on github: cytoscape-node-html-label

Extention demo: 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;
}
like image 94
kaluginserg Avatar answered Oct 20 '22 05:10

kaluginserg