CODEWITHSUNDEEP
cytoscape.js
Jiwen Xin
Jiwen Xin

Reputation: 21

How to set node label size in cytoscape.js concentric layout when there are large number of nodes

Hi, I'm trying to display a concentric graph using cytoscape.js. The data contains around 100 nodes. The reason I chose 'concentric' is because I want to display my graph in 3 layers (e.g. inner, middle, outer). And each node has a attribute called 'level', which is assigned to 1-3. The problem I have is with the font-size of node labels. However I change the label size to be, it remains so much which I barely can see it unless zoom in significantly. Here is how the graph currently looks like: example cytoscapejs graph

Here is how I currently set the cytoscape.js style and layout:

var style = [
{
    selector: "node[type = 'A']",
    style: {
        "background-color": "blue",
        "label": "data(id)",
        "height": 50,
        "width": 50,
        "font-size": "20px"
    }
},
{
    selector: "node[type = 'B']",
    style: {
        "background-color": "green",
        "label": "data(id)",
        "font-size": "80px",
        "height": 50,
        "width": 50
    }
},
{
    selector: "node[type= 'C']",
    style: {
        "background-color": "red",
        "label": "data(id)",
        "font-size": "30px",
        "height": 50,
        "width": 50
    }
},
{
    selector: "edge",
    style: {
        "curve-style": "haystack",
        "haystack-radius": 0,
        "width": 10,
        "opacity": 0.5,
        "line-color": "#a8eae5"
    }
}
];

// define concentric option
var concentricOptions = {
name: "concentric",
concentric: function (node) {
    return 10 - node.data("level");
},
minNodeSpacing: 1,
padding: -1
};

I tried a couple of different height, width, font-size parameters, but it seems none of them actually works. Wondering if anyone could help me to increase the label size. Ideally, I hope the label size could be displayed similar to the example here: http://js.cytoscape.org/demos/spread-layout/. However, this one is using a different layout.(But it also contains large number of nodes) Thanks!

Upvotes: 2

Views: 4557

Answers (1)

maxkfranz
maxkfranz

Reputation: 12242

You've spaced out your nodes too much. So when the graph is fitted to the viewport, you are zoomed out a lot.

Adjust your layout parameters until you get the visual result you want.

Parameters to consider:

  • spacingFactor
  • minNodeSpacing
  • avoidOverlap
  • nodeDimensionsIncludeLabels

Ref : http://js.cytoscape.org/#layouts/concentric

--

To alter the font size, use the stylesheet (i.e. font-size): http://js.cytoscape.org/#style/labels

Upvotes: 2

Related Questions