React TreeMap - Methods

Use this method to customize a specific node. Depending on whether the node is a tile or a group, this method accepts either a tile object or a group object.

You can call the customize(options) method at any point of the application flow, for example, when the nodes are being rendered.

var treeMapOptions = {
    // ...
    onNodesRendering: function (e) {
        var children = e.node.getAllChildren();
        $.each(children, function(_, node) {
            node.customize({
                label: {
                    font: {
                        color: node.value() > 100 ? 'blue' : 'red'
                    }
                }
            })
        })
    }
};

When the data source has several hierarchical levels, you may need to enable the user to navigate between them. The movement from the higher to the lower hierarchical level is called "drilling down". The movement backwards is called "drilling up". Although not provided out-of-the-box, this capability is easy to implement using the drillDown() and drillUp() methods.

Usually, drilling down is performed when the user clicks a group of tiles in the UI component. For example, the following code shows the onClick event handler where the drillDown() method is called of the clicked node.

var treeMapOptions = {
    // ...
    onClick: function (e) {
        e.node.drillDown();
    }    
};

To implement drilling up, bind another UI component to TreeMap, e.g., Button. When the user clicks the button, the treemap navigates one level up using its drillUp() method. Alternatively, a click on the button may navigate the user straight to the root node using the resetDrillDown() method of the treemap. Note that the following code configures the onClick handler of the button, not of the treemap.

var buttonOptions = {
    // ...
    onClick: function (e) {
        treeMapInstance.drillUp();
        // treeMapInstance.resetDrillDown();
    }    
};

When the user drills up or down, the drill event fires. To handle it, implement the onDrill event handler.

This method allows you to obtain only direct descendants of the current node. To get all its descendants, call the getAllNodes() method.

This method allows you to obtain all descendant nodes without tree traversal. If you need to obtain the direct descendants only, use the getAllChildren() method.

Usually, labels are provided by a data source field. To change the label of a specific node, call the label method passing the new text for the label as its parameter.

Use this method if you need to revert the initial appearance after customizing it using the customize(options) method.

To deselect all nodes at once, call the clearSelection() method.

Use this and hideTooltip() methods to change the visibility of the tooltip programmatically.