Cytoscape JS node thickness

Question

I want to draw a simple graph with Nodes and Links between Nodes. The thing is that I want the thickness of the Links to be set depending on a variable, so I cannot pre-determine a CSS class for that.

The code is from the example http://js.cytoscape.org/demos/dagre-layout/

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  layout: {
    name: 'dagre'
  },

  style: [
    {
      selector: 'node',
      style: {
        'content': 'data(id)',
        'text-opacity': 0.5,
        'text-valign': 'center',
        'text-halign': 'right',
        'background-color': '#11479e'
      }
    },

    {
      selector: 'edge',
      style: {
        'curve-style': 'bezier',
        'width': 4,
        'target-arrow-shape': 'triangle',
        'line-color': '#9dbaea',
        'target-arrow-color': '#9dbaea'
      }
    }
  ],

  elements: {
    nodes: [
      { data: { id: 'n0' } },
      { data: { id: 'n1' } },
      { data: { id: 'n2' } }
    ],
    edges: [
      { data: { source: 'n0', target: 'n1' } },
      { data: { source: 'n1', target: 'n2' } },
    ]
  },
});

How to add this kind of feature to the { data } ?

score 5 · Accepted Answer · answered Mar 07 '18 at 17:14

You can always reference the data of the edges like this:

    // Initialize cytoscape
    cy = window.cy = cytoscape({
        container: $('.cy'),
        boxSelectionEnabled: false,
        autounselectify: true,
        layout: {
            name: 'yourLayout'
        },
        style: [
            {
                selector: 'node',
                style: {
                    'shape': 'data(faveShape)',
                    'content': 'data(DisplayName)',
                    'height': 'data(faveHeight)',
                    'width': 'data(faveWidth)',
                    'background-color': 'data(faveColor)',
                    'line-color': '#a8eae5',
                    'font-family': 'Segoe UI,Helvetica Neue,Helvetica,Arial,Verdana',
                    'font-size': '15px',
                }
            },

            {
                selector: 'edge',
                style: {
                     'curve-style': 'bezier',
                     'width': data(myWidth),
                     'target-arrow-shape': 'triangle',
                     'line-color': '#9dbaea',
                     'target-arrow-color': '#9dbaea'
                }
            }
        ],
    });

When you defined the style of your nodes, you used data(id) as the nodes name, so when you want to define the style of your edges, you can always get the data of the edges for their style by using the same method data(whateverYouWantToGet).

When you define the edge, you can do it like this maybe:

var x = 0; // This is your variable, alter it like you want
var i = 0;
cy.add({
   data: {
      id: ('edge' + (i)),
      source: n0, // first node for example
      target: n1,
      myWidth: x
   },
   position: {},
   group: 'edges',
   removed: false,
   selected: false,
   selectable: true,
   locked: false,
   grabbed: false,
   grabbable: true,
   classes: 'autorotate'
});

Cytoscape JS node thickness

1 Answers1