layout algorithms for visualizing hierarchical data
npm install @antv/hierarchy> Layout algorithms for visualizing hierarchical data.
✨ TypeScript Support: Fully typed with TypeScript for better IDE support and type safety
🚀 Modern Build System: Built with Vite for faster builds and smaller bundle sizes
📦 Multiple Formats: Supports both ES modules and UMD formats
🎯 Tree-shakeable: ES module format allows for efficient tree-shaking
``bash`
npm install @antv/hierarchy
`typescript`
import { compactBox } from '@antv/hierarchy';
// or
import * as Hierarchy from '@antv/hierarchy';
`javascript`
const Hierarchy = require('@antv/hierarchy');
This library includes TypeScript definitions. You'll get full IntelliSense support:
`typescript
import { compactBox, type HierarchyNode, type CompactBoxOptions } from '@antv/hierarchy';
const options: CompactBoxOptions = {
direction: 'LR',
getId: (d) => d.id,
getWidth: (d) => 100,
getHeight: (d) => 50
};
`
`typescript
import { compactBox } from '@antv/hierarchy';
// or for CommonJS
// const { compactBox } = 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 = 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;
}
});
`
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 |
| -------- | -------- | -------- |
| !LR | !RL | !H |
| TB | BT | V |
| -------- | -------- | -------- |
| !TB | !BT | !V |
#### dendrogram
> demos
| LR | RL | H |
| -------- | -------- | -------- |
| !LR | !RL | !H |
| TB | BT | V |
| -------- | -------- | -------- |
| !TB | !BT | !V |
#### indented
> demos
| LR | RL | H |
| -------- | -------- | -------- |
| !LR | !RL | !H |
#### mindmap
this layout is inspired by XMind.
> demos