7. Apply Constraints

So far we have seen how to specify the positions of visual elements using layout and encoding. Another way is to use constraints.

Mascot currently supports two kinds of constraints: align and affix. The msc.align operation applies to an array of visual elements, and moves the elements so that their bounding boxes have the same value at a specified anchor. The figure below illustrates alignment constraints in the "y" direction with different anchor parameters.

The msc.affix operation specifies the relative positioning between an element i and a base element along the "x" or "y" direction. When such a constraint is applied, the base element’s position remains unchanged, and element i’s position is changed to satisfy the constraint. The figure below illustrates affix constraints in the "x" direction with different anchor and offset parameters. If the element and the base element have peers that are generated using msc.repeat, msc.divide, or msc.densify, those peers are handled automatically.