Getter/setter for the animation duration of transitions between states (opening, zoom in/out) in milliseconds. A falsy value (default) automatically zooms on clicked nodes, equivalent to m圜hart.onClick(m圜hart.zoomToNode). Includes the data node object (or null if clicking on the background) as single argument. Includes the data node object (or null if hovering on background) as single argument.Ĭallback function for click events. Programmatically reset the zoom to the global view.Ĭallback function for mouse hover events. 1 is unity, above one indicates a zoom-in and below a zoom-out. Programmatically zoom the chart by a specific amount. Programmatically zoom the chart to a particular node. Use this to specify extra content in each of the block's tooltips in addition to the title set in tooltipTitle. Getter/setter for a node object tooltip content.
#Treemap chart full#
If unspecified, the full hierarchical name will be displayed. The function should return a string to be displayed in bold in the first line of the tooltip. Getter/setter for a node object tooltip title. If unspecified, all nodes' tooltips will display. If this function returns false for a particular node, that node's tooltip will not display at all. Getter/setter to specify a node object tooltip's visibility. Regardless of this setting, labels too large to fit within a block's width are automatically hidden. Getter/setter for whether to show labels in the nodes. For example, to order blocks by size, use: (a, b) => b.value - a.value. Each element is an instance of d3-hierarchy node and has several useful properties to specify order: data (the corresponding data object), value (summed value of node and all its descendants) and depth (layer degree). This method is equivalent to d3-hierarchy's sort, it receives two arguments representing two sibling nodes and expects a numeric return value ( -1, 0 or 1) indicating the order. A value of null ( default) maintains the existing order found in the input data structure. Getter/setter for the compare method used to sort sibling blocks. Getter/setter for whether to exclude the root node from the representation. Getter/setter for the minimum area of a block (in square px) required for it to be rendered in the DOM. Determines the CSS class(es) to apply to each block node. Getter/setter for a node object classname accessor. Getter/setter for a node object color accessor, used to color the blocks. Getter/setter for the amount of padding between adjacent blocks, in px. Getter/setter for a node object size accessor, used to compute the areas of the blocks. Getter/setter for a node object label accessor, used to display labels on the blocks and their tooltips. Supports either a string indicating the object's property name, or a function(node) which should return an array of nodes. Getter/setter for a data node's children accessor, used to establish the hierarchical relationship between nodes. Getter/setter for the chart height in px. Getter/setter for chart data (see below for syntax details). Or const Treemap = require('treemap-chart') Quick start import Treemap from 'treemap-chart' See also the Circle Pack, Icicle and Sunburst charts. See here for an example of a randomly generated large data structure. The chart also responds to data changes by animating the dimensions of each of the nodes into their new positions.įor improved performance, nodes with area ( width* height) smaller than a given threshold ( minBlockArea) are excluded from the DOM, allowing for representation of large data sets while maintaining a smooth interaction. Supports zooming interactions via mouse-wheel events or by clicking on a node, which focuses the viewport on the associated sub-tree. An interactive treemap chart for visualizing proportions in hierarchical data, where nodes of a tree are represented as nested fully-packed rectangular tiles.