Layout

12 May 2017 / 1 minute to read

You can decide on the visual representation of nodes belonging to all the treemap levels using the itemsLayoutMode property of the TreeMap.

There are four different TreeMap layouts such as

  • Squarified
  • SliceAndDiceAuto
  • SliceAndDiceHorizontal
  • SliceAndDiceVertical

Squarified

Squarified layout creates rectangles with best aspect ratio.

  • js
  • "use strict";
    
    ReactDOM.render(
        <EJ.TreeMap id="treemap1" itemsLayoutMode ="squarified"> </EJ.TreeMap>,
              document.getElementById('treemaps')
    );

    SliceAndDiceAuto

    SliceAndDiceAuto layout creates rectangles with high aspect ratio and displays them sorted both horizontally and vertically.

  • js
  • "use strict";
    
    ReactDOM.render(
        <EJ.TreeMap id="treemap1" itemsLayoutMode ="sliceanddiceauto"> </EJ.TreeMap>,
        document.getElementById('treemaps')
    );

    SliceAndDiceHorizontal

    SliceAndDiceHorizontal layout creates rectangles with high aspect ratio and displays them sorted horizontally.

  • js
  • "use strict";
    
    ReactDOM.render(
        <EJ.TreeMap id="treemap1" itemsLayoutMode ="sliceanddicehorizontal"> </EJ.TreeMap>,
              document.getElementById('treemaps')
    );

    SliceAndDiceVertical

    SliceAndDiceVertical layout creates rectangles with high aspect ratio and displays them sorted vertical.

  • js
  • "use strict";
    
    ReactDOM.render(
        <EJ.TreeMap id="treemap1" itemsLayoutMode ="sliceanddicevertical"> </EJ.TreeMap>,
        document.getElementById('treemaps')
    );