Wiki
Clone wikiTree Visualization API / scale
Operator.js
connectTo | fill | order | reshape | rotate | scale | setStrokeColor | setStrokeWidth | slice | squarify | strip | translate |
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
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");
}
......
//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");
}
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");
}
......
//Scales the drawing area for the level to 250px, taking the space from the TOP.
POSTLAYOUT:
{
scale(TO,TOP,250);
reshape(DOT);
fill("#000000");
}
Using scale in PRELAYOUT
.......
PRELAYOUT:
{
scale(BY,BOTTOM,-30);
}
.......
.......
PRELAYOUT:
{
scale(BY,BOTTOM,-80);
}
.......
Updated