Wiki

Clone wiki

Tree Visualization API / scale

Operator.js

connectTofillorderreshaperotatescalesetStrokeColorsetStrokeWidthslicesquarifystriptranslate

Function scale

Scales a drawing area or a shape. If scale mode = BY then relative scaling is done relatively to the available drawing space. If scale mode = TO then absolute scaling is done.

Recommended stage: INITIALIZE , PRELAYOUT, POSTLAYOUT
If applied in INITIALIZE stage: scales the entire drawing area for the tree
If applied in PRELAYOUT stage:scales the drawing area of a level of the tree
If applied in POSTLAYOUT stage: scale the node shape

INITIALIZE or PRELAYOUT
scale mode = BY should be used
POSTLAYOUT
scale mode = TO should be used

Special Case: POSTLAYOUT: Different placement of scale will produce a different output.

  • If you want to make a node size smaller or bigger scale mode =TO should be called after the reshape in POSTLAYOUT stage.
  • Putting scale before calling reshape will actually scale the drawing area of that level not the node.

Function definition


scale(mode, direction, offset, condition)       

Parameters


mode      = (TO|BY)
direction = (TOP|BOTTOM|LEFT|RIGHT|HORIZONTAL|VERTICAL|ALL)
offset    = number of pixel to scale to/by (<0 means shrinking, >0 means stretching)
condition = optional condition if operator is to be carried out. If left out, it is assumed TRUE

Visual Explanation

Scaling Operator

Example


Using scale in POSTLAYOUT (after calling reshape)

......
//Scale down the shape to 5px, taking the space from all sides

POSTLAYOUT:
{
reshape(DOT);
scale(TO,ALL,5);
fill("Blues",DARK2LIGHT,"node.level+1","root.height");
}

Scaling To 5px

......
//Scale down the shape to 10px taking the space from all sides

POSTLAYOUT:
{

reshape(DOT);
scale(TO,ALL,10);
fill("Blues",DARK2LIGHT,"node.level+1","root.height");
}

Scaling To 10px

Using scale in POSTLAYOUT (before calling reshape)
From the following code fragment we can see that scaling before calling the reshape actually scales the drawing area of a particular level. In the second code fragment we can see much larger space has been assigned to every level as it does 5 times scaling than the first code fragment.

......
//Scales the drawing area for the level to 50px, taking the space from the TOP.

POSTLAYOUT:
{
scale(TO,TOP,50);
reshape(DOT);

fill("#000000");
}

Scaling To 5px

......
//Scales the drawing area for the level to 250px, taking the space from the TOP.

POSTLAYOUT:
{

scale(TO,TOP,250);
reshape(DOT);
fill("#000000");
}

Scaling To 10px
Using scale in PRELAYOUT

.......
PRELAYOUT:
{
scale(BY,BOTTOM,-30);
}

.......

Scaling by -30px

.......
PRELAYOUT:
{
scale(BY,BOTTOM,-80);
}

.......

Scaling by -80px

Updated