如何避免标签重叠？

Question

I'm trying to create a.network containing nodes with long labels, but this results in the labels overlapping with each other, making it difficult to read them all clearly.

How can I separate those labels?

How can I align elements in one compound?

Answer 1

• Adjust the relative sizes of your labels in your stylesheet
• Adjust your layout so that your nodes are spread farther apart
• Use short labels; you can show long text elsewhere, like in a tooltip

Answer 2

You can use avoidOverlap: true and nodeDimensionsIncludeLabels: true .

var layout = cy.elements().layout({
    name: 'dagre',
    avoidOverlap: true,
    nodeDimensionsIncludeLabels: true
});
layout.run();

Here I am using the cytoscape-dagre , but the same is possible with the layouts that come with cytoscape.js according to the documentation , for example with the grid layout.

Interestingly these options are not listed in the documentation of cytoscape-dagre, but they do work with it.