https://github.com/antvis/hierarchy
Layout algorithms for visualizing hierarchical data.
https://github.com/antvis/hierarchy
hierarchy layout layout-algorithm mindmap tree xmind
Last synced: 25 days ago
JSON representation
Layout algorithms for visualizing hierarchical data.
- Host: GitHub
- URL: https://github.com/antvis/hierarchy
- Owner: antvis
- License: mit
- Created: 2018-04-17T07:09:49.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-20T09:17:46.000Z (9 months ago)
- Last Synced: 2025-05-07T02:28:08.754Z (about 1 month ago)
- Topics: hierarchy, layout, layout-algorithm, mindmap, tree, xmind
- Language: JavaScript
- Homepage:
- Size: 5.35 MB
- Stars: 266
- Watchers: 15
- Forks: 32
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
@antv/hierarchy> Layout algorithms for visualizing hierarchical data.
[](https://github.com/antvis/hierarchy/actions)
[](https://www.npmjs.com/package/@antv/hierarchy)
[](https://www.npmjs.com/package/@antv/hierarchy)
[](https://www.npmjs.com/package/@antv/hierarchy)## API
### example
```js
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
