CODEWITHSUNDEEP
cytoscape.js
dulq
dulq

Reputation: 245

How can I make the label of an edge displayed just in the middle position?

I'm trying to make the label displayed in the middle position, say source --<sometext>--> target.

I'm reading the official document but I can't find an answer.

Can this be implemented?

Upvotes: 1

Views: 991

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

as you can see here, there is a simple solution to this provided by cytoscape:

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

  layout: {
    name: 'grid',
    cols: 2
  },

  style: [{
      "selector": "node[label]",
      "style": {
        "label": "data(label)"
      }
    },
    {
      "selector": "edge[label]",
      "style": {
        "label": "data(label)",
        "width": 3,
        "text-background-opacity": 1,
        "text-background-color": "#fff"
      }
    },
    {
      "selector": ".autorotate",
      "style": {
        "edge-text-rotation": "autorotate",
      }
    }
  ],

  elements: [{
      data: {
        id: 'one'
      }
    },
    {
      data: {
        id: 'two'
      }
    }, {
      data: {
        source: 'one',
        target: 'two',
        label: 'autorotate (move my nodes)'
      },
      classes: 'autorotate'
    }
  ]
});
body {
  font-family: helvetica, sans-serif;
  font-size: 14px;
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}
<html>

<head>
  <title>Labels demo</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
</head>

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

</html>

Upvotes: 3

Related Questions