Usage
Signature:
interface TreemapNodeElement
Typescript Import Format
//To typecheck the element APIs, import as below.
import {TreemapNodeElement} from "ojs/ojtreemap";
//For the transpiled javascript to load the element's module, import as below
import "ojs/ojtreemap";
For additional information visit:
Attributes
-
categories :Array.<string>
-
An optional array of category strings corresponding to this data item. This enables highlighting and filtering of individual data items through interactions with the legend and other visualization elements. The categories array of each node is required to be a superset of the categories array of its parent node. If not specified, the ids of the node and its ancestors will be used.
- Default Value:
[]
-
color :string
-
The fill color of the node.
- Default Value:
"#000000"
-
drilling :"on"|"off"|"inherit"
-
Specifies whether drilling is enabled for the node. Drillable nodes will show a pointer cursor on hover and fire an
ojDrill
event on click (double click if selection is enabled). To enable drilling for all nodes at once, use the drilling attribute in the top level.- Default Value:
"inherit"
Supported Values:
Value inherit
off
on
-
group-label-display :"node"|"off"|"header"
-
The label display behavior for group nodes.
Supported Values:
Value header
node
off
-
header :Object
-
An object defining the properties for the node header.
-
header.isolate :"off"|"on"
-
Specifies whether isolate behavior is enabled on the node.
Supported Values:
Value off
on
-
header.label-halign :"center"|"end"|"start"
-
The horizontal alignment of the header title.
Supported Values:
Value center
end
start
-
header.label-style :CSSStyleDeclaration
-
The CSS style object defining the style of the header title. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
-
header.use-node-color :"on"|"off"
-
Specifies whether the node color should be displayed in the header.
Supported Values:
Value off
on
-
label :string
-
The label for this node.
- Default Value:
""
-
label-display :"off"|"node"
-
The label display behavior for leaf nodes.
Supported Values:
Value node
off
-
label-halign :"start"|"end"|"center"
-
The horizontal alignment for labels displayed within the node.
Supported Values:
Value center
end
start
-
label-style :CSSStyleDeclaration
-
The CSS style object defining the style of the label. The CSS white-space property can be defined with value "nowrap" to disable default text wrapping. The following style properties are supported: color, cursor, fontFamily, fontSize, fontStyle, fontWeight, textDecoration.
- Default Value:
{}
-
label-valign :"top"|"bottom"|"center"
-
The vertical alignment for labels displayed within the node.
Supported Values:
Value bottom
center
top
-
pattern :"smallChecker"|"smallCrosshatch"|"smallDiagonalLeft"|"smallDiagonalRight"|"smallDiamond"|"smallTriangle"|"largeChecker"|"largeCrosshatch"|"largeDiagonalLeft"|"largeDiagonalRight"|"largeDiamond"|"largeTriangle"|"none"
-
The pattern used to fill the node.
- Default Value:
"none"
Supported Values:
Value largeChecker
largeCrosshatch
largeDiagonalLeft
largeDiagonalRight
largeDiamond
largeTriangle
none
smallChecker
smallCrosshatch
smallDiagonalLeft
smallDiagonalRight
smallDiamond
smallTriangle
-
selectable :"off"|"auto"
-
Specifies whether or not the node will be selectable.
- Default Value:
"auto"
Supported Values:
Value auto
off
-
short-desc :string
-
The description of this node. This is used for accessibility and also for customizing the tooltip text.
- Default Value:
""
-
svg-class-name :string
-
The CSS style class to apply to the node. The style class and inline style will override any other styling specified through the properties. For tooltip interactivity, it's recommended to also pass a representative color to the node color attribute.
- Default Value:
""
-
svg-style :CSSStyleDeclaration
-
The inline style to apply to the node. The style class and inline style will override any other styling specified through the properties. For tooltip interactivity, it's recommended to also pass a representative color to the node color attribute. Only SVG CSS style properties are supported.
- Default Value:
{}
-
value :number
-
The value of the node, which determines the relative size of the node.