CODEWITHSUNDEEP
javascripthtmlcsscytoscape.js
kaluginserg
kaluginserg

Reputation: 354

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

Upvotes: 5

Views: 6649

Answers (2)

kaluginserg
kaluginserg

Reputation: 354

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

Upvotes: 7

Lea Klein
Lea Klein

Reputation: 428

First, there must be an area to draw the graph. Add a tag to index.html, then within the body section, add a div element named "cy", like so: . This creates the body of the webpage, which in turn holds a div element named cy. Naming the element makes it easy to later access and modify this element for styling and passing to Cytoscape.js.

index.html should now look like this:

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

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

Next, the style of the graph area must be slightly modified via CSS (putting a graph into a 0 area div element is rather uninteresting). To accomplish this, add the following CSS code between and :

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

How about making the graph look nicer? Cytoscape.js provides a multitude of styling options for changing graph appearance. The initialization of the graph may be modified to change default style options, as follows:

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'
            }
        }]      
});

Next up is displaying labels in the graph so that nodes can be identified. Labels are added via the 'label’ property of style. Since labels are already provided (via the id property of data), we’ll use those. If other data properties are provided, such as firstname, those could be used instead.

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

The final common component of a graph in Cytoscape.js is the layout. Like style, elements, and containers, layout is also specified as a part of the object passed to cytoscape during construction. To the existing cy object, add (after elements):

layout: {
    name: 'grid'
}

check this out, it will help you - http://blog.js.cytoscape.org/2016/05/24/getting-started/

Upvotes: 0

Related Questions