d3-treemap-flex

Examples · This module implements the tiling method for d3-treemap to plot block diagrams. treemapFlex is similar with the built-in tiling methods treemapSlice, treemapDice and treemapSliceDice but with three main differences:

• subdividing area according to each node's individual value rather than the cumulative value of it's descendants
• capable of wrapping like CSS flexbox according to each node's wrap data attribute
• observing each node's direction data attribute to place child nodes in the specified direction

For example, given the following hierarchy:

const data = {
  name: "root",
  direction: "column",
  children: [
    { name: "a" },
    {
      name: "group",
      direction: "row",
      wrap: 2,
      children: [
        { name: "b", value: 2 },
        { name: "c", value: 1 },
        { name: "d", value: 1 },
        { name: "e", value: 2 },
      ],
    },
  ],
};

A treemap with treemapFlex tiling method should be rendered as following:

const treemap = d3.treemap().size([width, height]).tile(d3.treemapFlex()).padding(10);

Resources

• Releases
• Getting help

Installing

d3-treemap-flex is typically installed via a package manager such as NPM or Yarn, and should work with d3 (or d3-hierarchy more specifically).

$ npm i d3 && npm i d3-treemap-flex

Then sets treemap layout's tiling method to treemapFlex:

import { treemap } from "d3";
import { treemapFlex } from "d3-treemap-flex";

const t = treemap().tile(treemapFlex());

// ...

d3-treemap-flex is also available as a UMD bundle for legacy browsers.

<script src="https://cdn.jsdelivr.net/npm/d3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-treemap-flex"></script>
<script>
  const t = d3.treemap().tile(d3.treemapFlex());

  // ...
</script>

API Reference

treemapFlex()

Source· Creates a new treemapFlex tiling method with default settings, which observes node's wrap and direction data attribute if treemapFlex's wrap and direction is not specified.

padding = Inputs.range([0, 30], { label: "Padding", step: 1, value: 10 });

const treemap = d3
  .treemap()
  .size([width, height])
  .tile(d3.treemapFlex()) // Sets tiling method.
  .padding(padding);

treemapFlex.wrap(wrap)

Source· If wrap is specified, sets the wrap count to the specified number or function and returns this treemapFlex tiling method. If wrap is not specified, returns the current wrap count function, which defaults to observe node's wrap data attribute.

wrap = Inputs.range([1, 4], { label: "Wrap count", step: 1, value: 4 });

const treemap = d3
  .treemap()
  .size([width, height])
  .tile(
    d3
      .treemapFlex() // Sets wrap count for elements in group.
      .wrap((d) => (d.data.name === "group" ? wrap : d.children.length)),
  )
  .padding(10);

treemapFlex.direction(direction)

Source· If direction is specified, sets the placing direction to the specified direction or function and returns this treemapFlex tiling method. If direction is not specified, returns the current direction function, which defaults to directionSliceDice. If direction sets to column, divides the rectangular area vertically according the value of each of the specified node’s children. If direction sets to row, divides the rectangular area horizontally according the value of each of the specified node’s children.

direction = Inputs.radio(["column", "row"], {
  label: "Direction",
  value: "column",
});

const treemap = d3
  .treemap()
  .size([width, height])
  .tile(
    d3
      .treemapFlex() // Sets direction.
      .direction(direction),
  )
  .padding(10);

directionDiceSlice

Source· If current node has odd depth, divides the rectangular area vertically; otherwise divides the rectangular area horizontally.

const treemap = d3
  .treemap()
  .size([width, height])
  .tile(
    d3
      .treemapFlex() // Sets direction to directionDiceSlice.
      .direction(d3.directionDiceSlice),
  )
  .padding(10);

directionSliceDice

Source· If current node has odd depth, divides the rectangular area horizontally; otherwise divides the rectangular area vertically.

const treemap = d3
  .treemap()
  .size([width, height])
  .tile(
    d3
      .treemapFlex() // Sets direction to directionSliceDice.
      .direction(d3.directionSliceDice),
  )
  .padding(10);