CODEWITHSUNDEEP
parentcytoscape.js
arescout
arescout

Reputation: 11

Cytoscape.js - Change size of parent node

I'm using cytoscape.js to visualize graph data from Neo4j. One of the relations I'm extra interested in is the parent-child relation, which cytoscape.js makes visualizing a breeze for the most part.

However, when a parent only contains one child, that child node lays over the parent node's label so it's impossible to read without selecting it and having the label written out somewhere else on the page.

Example of child node obscuring view of parent node

Is there any way to get around this problem - some way to change the min size of a parent for example?

EDIT : Found 'node text-align: top' which puts the text outside and on top of the nodes, which solved the problem of seeing the label. Still interested in if changing size is possible though.

Upvotes: 1

Views: 1729

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

There is a whole section in the docs about the node body and how one can alter it. Especially the sub-section about padding should be of interest here. If you really want, you can set the min-width and min-height to the nodes or parents, but it is way better to just stick to the label alignment (as you already figured out).

For future reference, see this exerpt from the docs:

Padding:

A padding defines an addition to a node’s dimension. For example, padding adds to a node’s outer (i.e. total) width and height. This can be used to add spacing around the label of width: label; height: label; nodes, or it can be used to add spacing between a compound node parent and its children.

  • padding : The amount of padding around all sides of the node. Either percentage or pixel value can be specified. For example, both 50% and 50px are acceptable values. By default, percentage padding is calculated as a percentage of node width.
  • padding-relative-to : Determines how padding is calculated if and only if the percentage unit is used. Accepts one of the keywords specified below.
  • width : calculate padding as a percentage the node width.
  • height : calculate padding as a percentage of the node height.
  • average : calculate padding as a percentage of the average of the node width and height.
  • min : calculate padding as a percentage of the minimum of the node width and height.
  • max : calculate padding as a percentage of the maximum of the node width and height.

Compound parent sizing:

  • compound-sizing-wrt-labels : Whether to include labels of descendants in sizing a compound node; may be include or exclude.
  • min-width : Specifies the minimum (inner) width of the node’s body for a compound parent node (e.g. 400px). If the biases for min-width do not add up to 100%, then the biases are normalised to a total of 100%.
  • min-width-bias-left : When a compound node is enlarged by its min-width, this value specifies the percent of the extra width put on the left side of the node (e.g. 50%).
  • min-width-bias-right : When a compound node is enlarged by its min-width, this value specifies the percent of the extra width put on the right side of the node (e.g. 50%).
  • min-height : Specifies the minimum (inner) height of the node’s body for a compound parent node (e.g. 400px). If the biases for min-height do not add up to 100%, then the biases are normalised to a total of 100%.
  • min-height-bias-top : When a compound node is enlarged by its min-height, this value specifies the percent of the extra width put on the top side of the node (e.g. 50%).
  • min-height-bias-bottom : When a compound node is enlarged by its min-height, this value specifies the percent of the extra width put on the bottom side of the node (e.g. 50%).

Upvotes: 3

Related Questions