Wiki
Clone wikiTree Visualization API / fill
Operator.js
connectTo | fill | order | reshape | rotate | scale | setStrokeColor | setStrokeWidth | slice | squarify | strip | translate |
Function fill
fill fill the node shape with selected color options.There are two different version of fill.
- Fills a shape with a given color as hex-value.
- Fills a shape with a color from a palette and relative coloring is possible if specified.
Function definition
fill(color,condition) //fills a shape with a given colour
fill(palette,direction,value,maxvalue,condition) //fills a shape with a color from a palette
Parameters
color = “#RRGGBB” in hex
palette = ("YlGn", "YlGnBu", "GnBu", "BuGn", "PuBuGn", "PuBu", "BuPu", "RdPu", "PuRd",
"OrRd", "YlOrRd", "YlOrBr", "Purples", "Blues", "Greens", "Oranges", "Reds", "Greys")
- taken from http://colorbrewer2.org (sequential palettes)
direction = (DARK2LIGHT|LIGHT2DARK)
value = the value to be mapped on a color
maxvalue = maximum value to be mapped on the highest color (0 is the assumed minvalue)
condition = optional condition if operator is to be carried out. If left out, it is assumed TRUE
Example
Following code example colors all the node in each level red.
POSTLAYOUT:
{
..
fill("#FF0000"); //Color the nodes RED
...
}
Sample Output Figure:
Following code fragment colors the node from light green to dark green starting from root level to end level.
POSTLAYOUT:
{
...
fill("Greens",LIGHT2DARK,"node.level+1","root.height");
..
}
Sample Output Figure:
Following code fragment do the conditional coloring of the node. All leaf nodes are color red and no leaf nodes are colored blue.
POSTLAYOUT:
{
...
fill("#FF0000", "node.isLeaf()");
fill("#0000ee", "!node.isLeaf()");
..
}
Sample Output Figure:
Updated