Demystifying Automatic Edge Labeling
Applies to: yFiles 2.5, yFiles 2.4, yFiles 2.3, yFiles 2.2, yFiles 2.1, yFiles 2.0, yFiles.NET 2.4, yFiles.NET 2.3, yFiles.NET 2.2 print article email article

Type: Tips & Tricks

Achieving high-quality automatic edge label placement while performing a graph layout.

The yFiles library supports quite a variety of different ways to have a graph's edge labels be automatically placed. One of the possibilities is, that graph layout calculation can be combined with edge label placement.

Combining graph layout and edge labeling can either be done using generic labeling, or integrated labeling. Generic labeling means edge label placement that is performed as a postprocessing step after the actual graph layout has been calculated. Integrated labeling, in contrast, is directly provided by certain major layout algorithms as an integrated part of the layout calculation.

More on generic and integrated labeling can be found in the yFiles Developer's Guide: Automatic Label Placement.

Edge Label Setup for Automatic Placement

An edge label naturally belongs to its edge, and accordingly should be presented near this edge. To control the label's placement relative to its graph element, a so-called "label model" defines a number of valid label positions. Proper setup of an edge label using one of the available label models is demonstrated in the following code snippet.

More on label models can be found in the yFiles Developer's Guide:

What the sample code snippet does:

  • Creates an edge label and adds it early on to the edge realizer. If the edge realizer is properly associated an edge, and the edge in turn resides in a graph, this provides subsequently performed label settings access to the edge's proper environment.
  • Sets the edge label's model. 'CENTER_SLIDER' has a dynamic number of label positions that lie on the edge's path.
  • Sets the edge label's preferred placement to be close to the source node. Interface y.layout.LabelLayoutConstants defines a number of symbolic parameters for label positions, which are used by the automatic edge label placement algorithms.
// 'er' is of type y.view.EdgeRealizer. 

EdgeLabel el = er.createEdgeLabel();
er.addLabel(el);

el.setText("At the source side");

// Set an edge label model. 'CENTER_SLIDER' has a dynamic number of label 
// positions that lie on the edge's path.
el.setModel(EdgeLabel.CENTER_SLIDER);
// Choose a label position near the source node. 
el.setPreferredPlacement(LabelLayoutConstants.PLACE_AT_SOURCE);

Integrated Edge Labeling Capabilities

Integrated labeling is supported by the following major layout styles: It is conveniently enabled using methods setLabelLayouter(y.layout.LayoutStage) and setLabelLayouterEnabled(boolean) from class CanonicMultiStageLayouter. The source code snippet below shows how to use the services of class LabelLayoutTranslator to have integrated labeling set up properly.

What the sample code snippet does:

  • Sets class y.layout.LabelLayoutTranslator as being responsible for automatic edge labeling. This specific setting is used to indicate that a graph layout algorithm's integrated edge labeling capabilities should be used. Actually, class LabelLayoutTranslator only converts label layout information so that it is understood by a graph layout algorithm.
  • Explicitly enables automatic (edge) label placement.
// 'layout' is of type y.layout.Layouter. 

// Use integrated labeling support, and let class LabelLayoutTranslator do the 
// conversion of information held by an edge label's EdgeLabelLayout object 
// to data provider-based information that is understood by the algorithm. 
// (Either hierarchical or orthogonal layout.) 
layout.setLabelLayouter(new LabelLayoutTranslator());
layout.setLabelLayouterEnabled(true);

Refining Edge Label Positions

Using the services of class LabelLayoutDataRefinement, edge label positions can be further refined. LabelLayoutDataRefinement concentrates on edge labels that should be near either source or target node, i.e., that have 'PLACE_AT_SOURCE' or 'PLACE_AT_TARGET' set as their preferred placement. The source code snippet below shows an enhanced setup for graph layout invocation where integrated labeling should be refined.

What the sample code snippet does:

  • Instantiates a new LabelLayoutDataRefinement object that postprocesses edge label placement for certain edge labels.
  • Tells the refinement process to also use (rather than completely ignore) label position candidates that overlap with other edge paths.
  • Builds a composite layout stage that incorporates LabelLayoutTranslator and LabelLayoutDataRefinement.
  • Sets the compound as being responsible for automatic edge labeling.
  • Explicitly enables automatic (edge) label placement.
// Instantiate edge label position refinement postprocessing. 
LabelLayoutDataRefinement lldr = new LabelLayoutDataRefinement();
// As an option, the refinement process can be told to only penalize (rather than 
// completely ignore) label position candidates that overlap with other edge 
// paths. 
lldr.getInternalLabelingAlgorithm().setRemoveEdgeOverlaps(false);

// Create a layout stage that represents a composition of integrated labeling 
// with subsequent refinement on the calculated positions. 
CompositeLayoutStage cls = new CompositeLayoutStage();
cls.appendStage(new LabelLayoutTranslator());
cls.appendStage(lldr);

// Use the composed layout stage for automatic edge labeling. 
layout.setLabelLayouter(cls);
layout.setLabelLayouterEnabled(true);

Generic Labeling

When a generic labeling algorithm is directly combined with a graph layout algorithm, the labeling is performed after the layout has been calculated. The default setup is as brief as presented in the following source code snippet.

What the sample code snippet does:

  • Instantiates one of the available generic labeling algorithms and sets it as being responsible for automatic edge labeling.
  • Explicitly enables automatic (edge) label placement.
// Instantiate a generic labeling algorithm. 
layout.setLabelLayouter(new GreedyMISLabeling());
layout.setLabelLayouterEnabled(true);

Improving Generic Labeling

The outcome of a generic labeling algorithm can be further improved by using a customized implementation of interface y.layout.ProfitModel that rates a given label position candidate for its quality. Class LabelRanking provides a default implementation that is well suited for most use-cases. The sample code snippet below shows how to use LabelRanking.

What the sample code snippet does:

  • Instantiates a generic labeling algorithm.
  • Tells the labeling algorithm to process only edge labels. (This is optional.)
  • Sets class LabelRanking as the ProfitModel implementation to be used with this labeling algorithm.
  • Sets the labeling algorithm as being responsible for automatic edge labeling.
  • Explicitly enables automatic (edge) label placement.
// Instantiate a generic labeling algorithm. 
GreedyMISLabeling la = new GreedyMISLabeling();
// Process only edge labels. 
la.setPlaceNodeLabels(false);
la.setPlaceEdgeLabels(true);

// Set another ProfitModel to be used for rating label position candidates. 
la.setProfitModel(new LabelRanking());

layout.setLabelLayouter(la);
layout.setLabelLayouterEnabled(true);


Keywords: edge - label - placement - labeling - labels - generic - integrated - overlap - automatic - automatically - setLabelLayouterEnabled - setLabelLayouter - LabelLayoutTranslator - LabelLayoutDataRefinement - ProfitModel - LabelRanking

Provide feedback:
How useful was this article?    less 1 2 3 4 5 more
Email address (optional):
COPYRIGHT © 2008 yWorks · ALL RIGHTS RESERVED imprint | top | home