klay.js Node Label Placement Example

Use the radio buttons below to change between different node label placement strategies. The layout option de.cau.cs.kieler.nodeLabelPlacement is a combination of three components: the vertical alignment, the horizontal alignment, and whether the label should be placed inside or outside of the node. Not every combination makes sense though. A label placed on the outside cannot be centered in both dimensions.

The layout algorithm computes a position for the top-left corner of the label, relative to the top-left corner of the parent node. This has to be considered whenever labels are positioned with a different reference point, which is the default behavior of SVGs, for instance. The rendering below should look fine in Chrome since the alignment-baseline: hanging; attribute is interpreted correctly. In Firefox the labels seem to be positioned too high (currently). Additionally note that the layout algorithm is not able to compute the dimensions of a label, as it isn't aware of the used font size and font family.

V_TOP V_CENTER V_BOTTOM

H_LEFT H_CENTER H_RIGHT

INSIDE OUTSIDE