@antv/hierarchy
@antv/hierarchy
npm i @antv/hierarchy
@antv/hierarchy

@antv/hierarchy

Layout algorithms for visualizing hierarchical data.

by antvis

0.6.8 (see all)License:MITTypeScript:Not Found
npm i @antv/hierarchy
Readme

hierarchy

layout algorithms for visualizing hierarchical data.

API

example

const Hierarchy = require('@antv/hierarchy');

// your tree data
const root = {
  isRoot: true,
  id: 'Root',
  children: [
    {
      id: 'SubTreeNode1',
      children: [
        {
          id: 'SubTreeNode1.1'
        },
        {
          id: 'SubTreeNode1.2'
        }
      ]
    },
    {
      id: 'SubTreeNode2'
    }
  ]
};

// apply layout
const NODE_SIZE = 16;
const PEM = 5;
const ctx = document.getElementById('id-of-canvas-element').getContext('2d');
const rootNode = Hierarchy.compactBox(root, {
  direction: 'H', // H / V / LR / RL / TB / BT
  getId(d) {
    return d.id;
  },
  getHeight(d) {
    if (d.isRoot) {
      return NODE_SIZE * 2;
    }
    return NODE_SIZE;
  },
  getWidth(d) {
    if (d.isRoot) {
      return ctx.measureText(d.id).width * 2 + PEM * 1.6;
    }
    return ctx.measureText(d.id).width + PEM * 1.6;
  },
  getHGap(d) {
    if (d.isRoot) {
      return PEM * 2;
    }
    return PEM;
  },
  getVGap(d) {
    if (d.isRoot) {
      return PEM * 2;
    }
    return PEM;
  },
  getSubTreeSep(d) {
    if (!d.children || !d.children.length) {
      return 0;
    }
    return PEM;
  }
});

layout types

Hierarchy[type]

compactBox

this layout differs from d3-hierarcy.tree, it is a compact box tidy layout that is tidy in both horizontal and vertical directions.

demos

LRRLH
LRRLH
TBBTV
TBBTV

dendrogram

demos

LRRLH
LRRLH
TBBTV
TBBTV

indented

demos

LRRLH
LRRLH

mindmap

this layout is inspired by XMind.

demos

mindmap

Downloads/wk

71.3K

GitHub Stars

158

LAST COMMIT

1yr ago

MAINTAINERS

41

CONTRIBUTORS

6

OPEN ISSUES

4

OPEN PRs

1
VersionTagPublished
0.6.8
latest
1yr ago
0.1.0-beta.4
beta
5yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate