This step shows how to control label placement with the help of layout parameters.
The default label layout parameters can be configured in the graph’s nodeDefaults and edgeDefaults.
// Place node labels in the node center
graph.nodeDefaults.labels.layoutParameter = InteriorNodeLabelModel.CENTER
// Use a rotated layout for edge labels
graph.edgeDefaults.labels.layoutParameter = new SmartEdgeLabelModel({
autoRotation: true
}).createParameterFromSource({
segmentIndex: 0,
distance: 10.0, // distance between the label's box and the edge path
segmentRatio: 0.5 // placement near the center of the path
})The label layout parameter can also be changed during runtime. Click the button below to apply the layout parameters from the code sample.
// InteriorStretchLabelModel stretches the label width or height to match the node size
const interiorStretchModel = new StretchNodeLabelModel({ padding: 3 })
graph.setLabelLayoutParameter(
label1,
interiorStretchModel.createParameter('top')
)
// ExteriorLabelModel places the label in discrete positions outside the node bounds
const exteriorLabelModel = new ExteriorNodeLabelModel({ margins: 10 })
graph.setLabelLayoutParameter(
label2,
exteriorLabelModel.createParameter('bottom')
)
// NinePositionsEdgeLabelModel provides a set of 9 predefined locations on an edge
graph.setLabelLayoutParameter(
edgeLabel,
NinePositionsEdgeLabelModel.CENTER_ABOVE
)You can also take a look at the Layout Styles: Labeling Demo, Automatic Node Labeling Demo and the Edge Label Placement Demo that show how to configure node and edge labels.