0.1.1 (April 24, 2024)

Announcing d3-tree-flex 0.1.1

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: "d", value: 2 },
      ],
    },
  ],
};

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