@antv/hierarchy

What is @antv/hierarchy?

@antv/hierarchy is a library for visualizing hierarchical data structures. It provides algorithms for layout and rendering of various types of hierarchical diagrams such as trees, clusters, and more.

What are @antv/hierarchy's main functionalities?

Tree Layout

This feature allows you to create a tree layout from hierarchical data. The code sample demonstrates how to use the tree layout algorithm to process a simple hierarchical data structure.

const { hierarchy, tree } = require('@antv/hierarchy');
const data = { name: 'root', children: [{ name: 'child1' }, { name: 'child2' }] };
const root = hierarchy(data);
const layout = tree().size([500, 500]);
const treeData = layout(root);
console.log(treeData);

Cluster Layout

This feature provides a cluster layout for hierarchical data. The code sample shows how to apply the cluster layout algorithm to a hierarchical data structure.

const { hierarchy, cluster } = require('@antv/hierarchy');
const data = { name: 'root', children: [{ name: 'child1' }, { name: 'child2' }] };
const root = hierarchy(data);
const layout = cluster().size([500, 500]);
const clusterData = layout(root);
console.log(clusterData);

Treemap Layout

This feature allows you to create a treemap layout, which is useful for visualizing hierarchical data with weighted nodes. The code sample demonstrates how to generate a treemap layout from a data structure with value attributes.

const { hierarchy, treemap } = require('@antv/hierarchy');
const data = { name: 'root', children: [{ name: 'child1', value: 100 }, { name: 'child2', value: 200 }] };
const root = hierarchy(data).sum(d => d.value);
const layout = treemap().size([500, 500]);
const treemapData = layout(root);
console.log(treemapData);

Other packages similar to @antv/hierarchy

d3-hierarchy

d3-hierarchy is a module of D3.js that provides similar functionality for hierarchical data visualization. It offers a variety of layouts such as tree, cluster, and treemap. Compared to @antv/hierarchy, d3-hierarchy is part of the larger D3 ecosystem, which provides a comprehensive suite of data visualization tools.

flare

Flare is a visualization toolkit for creating interactive visualizations in ActionScript. While not a direct npm package, it offers similar hierarchical visualization capabilities. Flare is more focused on interactive and animated visualizations, whereas @antv/hierarchy is a JavaScript library focused on layout algorithms.

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

LR	RL	H

TB	BT	V

dendrogram

demos

LR	RL	H

TB	BT	V

indented

demos

LR	RL	H

mindmap

this layout is inspired by XMind.

demos