Font Size Issue in Cytoscape.js

961 views Asked by At

I am using a circular layout in Cytoscape.js. I noticed that the size of nodes and font is correlated/connected to each other. Increasing the font size renders smaller node sizes (a relative view I understand). Is there a way to disconnect this relation and show increased font size without affecting the size of nodes?

I want it for all nodes (for single/ isolated events, the increase in font size doesn't affect node size, but for all nodes together, it leads to relative scaling).

1

There are 1 answers

0
maxkfranz On BEST ANSWER

You should read the article on Wikipedia for matrix transformations in graphics: https://en.wikipedia.org/wiki/Transformation_matrix

Basically, the concept of a zoom is just a stretch/scale transform. That means if you change the viewport zoom level, you scale everything. When you run a layout and fit to the viewport, you're doing an automatic pan and zoom based on the total bounding box of the elements.

Node size and label size are not at all related. You're using different zoom levels at the same time you're changing the label size, making it easy to conflate the two factors.

Just adjust your node size if you want a smaller/larger node, and just adjust your label size if you want a smaller/larger label. If you want absolute, rendered sizes you can't use zoom levels other than 1 or any fitting.