{"id":13403983,"url":"https://github.com/antvis/hierarchy","last_synced_at":"2025-05-16T04:06:45.741Z","repository":{"id":48039628,"uuid":"129861730","full_name":"antvis/hierarchy","owner":"antvis","description":"Layout algorithms for visualizing hierarchical data.","archived":false,"fork":false,"pushed_at":"2024-09-20T09:17:46.000Z","size":5609,"stargazers_count":266,"open_issues_count":11,"forks_count":32,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-07T02:28:08.754Z","etag":null,"topics":["hierarchy","layout","layout-algorithm","mindmap","tree","xmind"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antvis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-17T07:09:49.000Z","updated_at":"2025-04-27T20:25:26.000Z","dependencies_parsed_at":"2024-01-13T11:13:29.925Z","dependency_job_id":"0baab899-1b9c-417b-989b-bd99c35805d7","html_url":"https://github.com/antvis/hierarchy","commit_stats":{"total_commits":63,"total_committers":12,"mean_commits":5.25,"dds":0.4920634920634921,"last_synced_commit":"d786901874f59d96c47e2a5dfe17b373eefd72e3"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fhierarchy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fhierarchy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fhierarchy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2Fhierarchy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/hierarchy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254430933,"owners_count":22070012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hierarchy","layout","layout-algorithm","mindmap","tree","xmind"],"created_at":"2024-07-30T19:01:37.219Z","updated_at":"2025-05-16T04:06:45.693Z","avatar_url":"https://github.com/antvis.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n\u003cb\u003e@antv/hierarchy\u003c/b\u003e\n\u003c/h1\u003e\n\n\u003e Layout algorithms for visualizing hierarchical data.\n\n[![Build Status](https://github.com/antvis/hierarchy/actions/workflows/build.yml/badge.svg)](https://github.com/antvis/hierarchy/actions)\n[![npm Version](https://img.shields.io/npm/v/@antv/hierarchy.svg)](https://www.npmjs.com/package/@antv/hierarchy)\n[![npm Download](https://img.shields.io/npm/dm/@antv/hierarchy.svg)](https://www.npmjs.com/package/@antv/hierarchy)\n[![npm License](https://img.shields.io/npm/l/@antv/hierarchy.svg)](https://www.npmjs.com/package/@antv/hierarchy)\n\n\n## API\n\n### example\n\n```js\nconst Hierarchy = require('@antv/hierarchy');\n\n// your tree data\nconst root = {\n  isRoot: true,\n  id: 'Root',\n  children: [\n    {\n      id: 'SubTreeNode1',\n      children: [\n        {\n          id: 'SubTreeNode1.1'\n        },\n        {\n          id: 'SubTreeNode1.2'\n        }\n      ]\n    },\n    {\n      id: 'SubTreeNode2'\n    }\n  ]\n};\n\n// apply layout\nconst NODE_SIZE = 16;\nconst PEM = 5;\nconst ctx = document.getElementById('id-of-canvas-element').getContext('2d');\nconst rootNode = Hierarchy.compactBox(root, {\n  direction: 'H', // H / V / LR / RL / TB / BT\n  getId(d) {\n    return d.id;\n  },\n  getHeight(d) {\n    if (d.isRoot) {\n      return NODE_SIZE * 2;\n    }\n    return NODE_SIZE;\n  },\n  getWidth(d) {\n    if (d.isRoot) {\n      return ctx.measureText(d.id).width * 2 + PEM * 1.6;\n    }\n    return ctx.measureText(d.id).width + PEM * 1.6;\n  },\n  getHGap(d) {\n    if (d.isRoot) {\n      return PEM * 2;\n    }\n    return PEM;\n  },\n  getVGap(d) {\n    if (d.isRoot) {\n      return PEM * 2;\n    }\n    return PEM;\n  },\n  getSubTreeSep(d) {\n    if (!d.children || !d.children.length) {\n      return 0;\n    }\n    return PEM;\n  }\n});\n```\n\n### layout types\n\n`Hierarchy[type]`\n\n#### compactBox\n\nthis layout differs from `d3-hierarcy.tree`, it is a compact box tidy layout that is tidy in both horizontal and vertical directions.\n\n\u003e demos\n\n| LR | RL | H |\n| -------- | -------- | -------- |\n| ![LR](./assets/compact-box-lr.png) | ![RL](./assets/compact-box-rl.png) | ![H](./assets/compact-box-h.png) |\n\n| TB | BT | V |\n| -------- | -------- | -------- |\n| ![TB](./assets/compact-box-tb.png) | ![BT](./assets/compact-box-bt.png) | ![V](./assets/compact-box-v.png) |\n\n#### dendrogram\n\n\u003e demos\n\n| LR | RL | H |\n| -------- | -------- | -------- |\n| ![LR](./assets/dendrogram-lr.png) | ![RL](./assets/dendrogram-rl.png) | ![H](./assets/dendrogram-h.png) |\n\n| TB | BT | V |\n| -------- | -------- | -------- |\n| ![TB](./assets/dendrogram-tb.png) | ![BT](./assets/dendrogram-bt.png) | ![V](./assets/dendrogram-v.png) |\n\n#### indented\n\n\u003e demos\n\n| LR | RL | H |\n| -------- | -------- | -------- |\n| ![LR](./assets/indented-lr.png) | ![RL](./assets/indented-rl.png) | ![H](./assets/indented-h.png) |\n\n#### mindmap\n\nthis layout is inspired by XMind. \n\n\u003e demos\n\n![mindmap](./assets/mindmap.png)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fhierarchy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2Fhierarchy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fhierarchy/lists"}