CODEWITHSUNDEEP
cytoscape.js
muhana
muhana

Reputation: 101

Why does using Cytoscape I can`t align text correcnly

I am vizualizing my db with cytoscape.js, but I can't align the parent nodes text correctly (by object). It seems like the "parent" selector does not exist. All other selectors are working correctly for me.

Here is the important part of my js file:

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  style: [{
      selector: 'node',
      css: {
        'content': 'data(label)',
        'text-valign': 'center',
        'text-halign': 'center',
        'font-style': 'oblique',
        'font-size': 10,
        'shape': 'round-rectangle',
      }
    },
    {
      selector: 'parent',
      css: {
        'text-valign': 'top',
        'text-halign': 'center',
        'font-style': 'normal',
        'font-size': 15,
      }
    },
    {
      selector: 'edge',
      css: {
        'curve-style': 'unbundled-bezier',
        'control-point-distances': [-20, 10],
        'target-arrow-shape': 'triangle'
      }
    }
  ],

  elements: myElements,

  layout: {
    name: 'preset',
    padding: 5
  }
});

Upvotes: 1

Views: 337

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

You are using the parent selector wrong, you can read up on these selectors in the docs:

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  style: [{
      selector: 'node',
      css: {
        'content': 'data(label)',
        'text-valign': 'center',
        'text-halign': 'center',
        'font-style': 'oblique',
        'font-size': 10,
        'shape': 'round-rectangle',
      }
    },
    {
      selector: ':parent',
      css: {
        'text-valign': 'top',
        'text-halign': 'center',
        'font-style': 'normal',
        'font-size': 15,
      }
    },
    {
      selector: 'edge',
      css: {
        'curve-style': 'unbundled-bezier',
        'control-point-distances': [-20, 10],
        'target-arrow-shape': 'triangle'
      }
    }
  ],

  elements: myElements,

  layout: {
    name: 'preset',
    padding: 5
  }
});

Upvotes: 1

Related Questions