antvis/hierarchy

Name: hierarchy

Owner: AntV team

Description: layout algorithms for visualizing hierarchical data.

Created: 2018-04-17 07:09:49.0

Updated: 2018-05-24 06:54:38.0

Pushed: 2018-05-17 06:27:45.0

Homepage: null

Size: 4725

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

hierarchy

layout algorithms for visualizing hierarchical data.

API

example

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

our tree data
t root = {
Root: true,
: 'Root',
ildren: [
{
  id: 'SubTreeNode1',
  children: [
    {
      id: 'SubTreeNode1.1'
    },
    {
      id: 'SubTreeNode1.2'
    }
  ]
},
{
  id: 'SubTreeNode2'
}



pply layout
t NODE_SIZE = 16;
t PEM = 5;
t ctx = document.getElementById('id-of-canvas-element').getContext('2d');
t rootNode = Hierarchy.compactBox(root, {
rection: 'H', // H / V / LR / RL / TB / BT
tId(d) {
return d.id;

tHeight(d) {
if (d.isRoot) {
  return NODE_SIZE * 2;
}
return NODE_SIZE;

tWidth(d) {
if (d.isRoot) {
  return ctx.measureText(d.id).width * 2 + PEM * 1.6;
}
return ctx.measureText(d.id).width + PEM * 1.6;

tHGap(d) {
if (d.isRoot) {
  return PEM * 2;
}
return PEM;

tVGap(d) {
if (d.isRoot) {
  return PEM * 2;
}
return PEM;

tSubTreeSep(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