Wiki
Clone wikiTree Visualization API / Tutorial
| Operators | Interactions | Gallery | Tutorial |
==== This tutorial is not complete... ====
Suppose you want to generate the following tree layout (Radial Node Link tree layout) using the API. You have started with an empty configuration file.
// Radial Node Link config file
INITIALIZE:
{
}
PREPROCESS:
{
}
PRELAYOUT:
{
}
ALLOCATE:
{
}
POSTLAYOUT:
{
}
As radial layout need a circular drawing space. Following changes need to be made in the INITIALIZE stage to start with a circular drawing space.
// Radial Node Link config file
INITIALIZE:
{
reshape(CIRCLE);
}
PREPROCESS:
{
}
PRELAYOUT:
{
}
ALLOCATE:
{
}
POSTLAYOUT:
{
}
Output:
Effect of ordering in Post Layout
// Radial Node Link config file
INITIALIZE:
{
reshape(CIRCLE);
}
PREPROCESS:
{
order(SHUFFLE);
}
PRELAYOUT:
{
scale(BY,BOTTOM,"-root.dimY/root.height");
}
ALLOCATE:
{
slice(HORIZONTAL,"leaves");
}
POSTLAYOUT:
{
reshape(DOT);
scale(TO,TOP,"root.dimY/root.height");
}
Using different (RECTANGLE) shape for the nodes.
// Radial Node Link config file
INITIALIZE:
{
reshape(CIRCLE);
}
PREPROCESS:
{
order(SHUFFLE);
}
PRELAYOUT:
{
scale(BY,BOTTOM,"-root.dimY/root.height");
}
ALLOCATE:
{
slice(HORIZONTAL,"leaves");
}
POSTLAYOUT:
{
scale(TO,TOP,"root.dimY/root.height");
reshape(RECTANGLE);
}
Final configuration file.
// // Radial Node Link config file
INITIALIZE:
{
reshape(CIRCLE);
}
PREPROCESS:
{
order(SHUFFLE);
}
PRELAYOUT:
{
scale(BY,BOTTOM,"-root.dimY/root.height");
}
ALLOCATE:
{
slice(HORIZONTAL,"leaves");
}
POSTLAYOUT:
{
scale(TO,TOP,"root.dimY/root.height");
reshape(DOT);
fill("#000000");
}
Final Output:
Updated