{"id":16227560,"url":"https://github.com/benyasin/d3-org-tree","last_synced_at":"2025-06-25T00:40:19.477Z","repository":{"id":53253961,"uuid":"279900198","full_name":"benyasin/d3-org-tree","owner":"benyasin","description":"📈  A highly customizable org tree built with d3.js","archived":false,"fork":false,"pushed_at":"2021-03-23T03:16:57.000Z","size":100,"stargazers_count":112,"open_issues_count":0,"forks_count":12,"subscribers_count":25,"default_branch":"master","last_synced_at":"2024-10-11T12:52:59.833Z","etag":null,"topics":["customizable","d3js","org-tree","svg","visualization"],"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/benyasin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-15T15:06:30.000Z","updated_at":"2024-06-02T09:51:48.000Z","dependencies_parsed_at":"2022-08-27T06:21:52.411Z","dependency_job_id":null,"html_url":"https://github.com/benyasin/d3-org-tree","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benyasin%2Fd3-org-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benyasin%2Fd3-org-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benyasin%2Fd3-org-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benyasin%2Fd3-org-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benyasin","download_url":"https://codeload.github.com/benyasin/d3-org-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221663622,"owners_count":16859867,"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":["customizable","d3js","org-tree","svg","visualization"],"created_at":"2024-10-10T12:53:08.589Z","updated_at":"2024-10-27T10:33:41.004Z","avatar_url":"https://github.com/benyasin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub stars](https://img.shields.io/github/stars/benyasin/d3-org-tree.svg?style=flat-square)](https://github.com/benyasin/d3-org-tree/stargazers)\n[![GitHub issues](https://img.shields.io/github/issues/benyasin/d3-org-tree.svg?style=flat-square)](https://github.com/benyasin/d3-org-tree/issues)\n[![GitHub forks](https://img.shields.io/github/forks/benyasin/d3-org-tree.svg?style=flat-square)](https://github.com/benyasin/d3-org-tree/network)\n[![GitHub last commit](https://img.shields.io/github/last-commit/benyasin/d3-org-tree.svg?style=flat-square)](https://github.com/benyasin/d3-org-tree)\n\n\u003cdiv style=\"width: 100%; height:150px; text-align:center; display:flex; flex-direction: row; justify-content: center; align-items: center;\"\u003e\n  \u003ca href=\"javascript:void(0)\" style=\"display:inline-block;\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/1866848/112085779-165e5b00-8bc6-11eb-9fea-82498bb953d5.png\" width=\"60%\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Futures\n\n`d3-org-tree` is highly customizable tree built with d3.js v6 that can run in modern browser like `Chrome`, `Edge`, `Firefox` and `Safari`.\nExcept d3.js, it does not have any third-party dependencies.\n\nSome d3-org-tree features:\n*  custom node style, including svg and pure html dom through `template`\n*  customize the node behavior, including `expand` child nodes, `add` child nodes, and `delete` it\n*  customize the current node `highlight` style and can manually change the current node\n*  pre-set or dynamically change the layout `orientation`, link style, and whether to `display arrows`\n*  pre-set the `width/height` of the svg container and the margin offset of the content\n*  pre-set transform animation `duration`\n*  customize callback function on node `click`,`add` and `remove` event\n\n## Demo\n\n* \u003ca target=\"_blank\" href=\"https://github.com/benyasin/d3-org-tree-vue-demo\"\u003eVue integration demo\u003c/a\u003e\n\n![tree](https://user-images.githubusercontent.com/1866848/88409973-4b809680-ce08-11ea-99a7-ac49d47f7cf7.png)\n\n## Installing\n\n```\nnpm i d3-org-tree\n```\n\n## Usage\n\n```javascript\nimport OrgTree from \"d3-org-tree\";\n\nconst orgTree = new OrgTree()\norgTree.container('body') //dom element\n       .data(/**{}*/)     //data json array, example as below\n       .svgWidth(800)\n       .svgHeight(600)\n       .highlight({\n            \"borderWidth\": 1,\n            \"borderRadius\": 15,\n            \"borderColor\": {\"red\": 50,\"green\": 255,\"blue\": 30,\"alpha\": 1},\n            \"backgroundColor\": {\"red\": 20,\"green\": 100,\"blue\": 40,\"alpha\": 1}\n        })\n       .initialZoom(.3)\n       .onNodeClick(d =\u003e {\n            console.log(d + \" node clicked\")\n        })\n        .onNodeAdd(d =\u003e {\n            console.log(d + \" node added\")\n            orgTree.addNode(/*added node json*/)\n        })\n        .onNodeRemove(d =\u003e {\n            console.log(d + \" node removed\")\n            orgTree.remove(/*removed nodeId*/)\n        })\n       .render()\n```\n\n**data example**:\n```json\n[  {\n     \"nodeId\": \"O-1\",\n     \"parentNodeId\": null,\n     \"width\": 325,\n     \"height\": 139,\n     \"borderWidth\": 1,\n     \"borderRadius\": 15,\n     \"borderColor\": {\n       \"red\": 15,\n       \"green\": 140,\n       \"blue\": 121,\n       \"alpha\": 0.5\n     },\n     \"backgroundColor\": {\n       \"red\": 0,\n       \"green\": 81,\n       \"blue\": 90,\n       \"alpha\": 0.5\n     },\n     \"template\": \"\u003cdiv class=\\\"domStyle\\\"\u003e\\n\u003cspan\u003eBen\u003c/span\u003e\u003c/div\u003e\",\n     \"expanded\": true,\n     \"added\": false,\n     \"removed\": false\n   },\n   {\n     \"nodeId\": \"O-2\",\n     \"parentNodeId\": \"O-1\",\n     \"width\": 319,\n     \"height\": 134,\n     \"borderWidth\": 1,\n     \"borderRadius\": 15,\n     \"borderColor\": {\n       \"red\": 15,\n       \"green\": 140,\n       \"blue\": 121,\n       \"alpha\": 0.5\n     },\n     \"backgroundColor\": {\n       \"red\": 0,\n       \"green\": 81,\n       \"blue\": 90,\n       \"alpha\": 0.5\n     },\n     \"template\": \"\u003cdiv class=\\\"domStyle\\\"\u003e\u003cspan\u003eHoney\u003c/span\u003e\u003c/div\u003e\",\n     \"expanded\": true,\n     \"added\": true,\n     \"removed\": false\n   }]\n```\n## API\n            \n|  Properties  | Usage |\n|  --- | --- |\n|  svgWidth  | `number`, the svg width, and will be 100% of the container's width if not set|\n|  svgHeight  | `number`, the svg height, and will be `600` if not set |\n|  container  | `string`, the svg dom selector, can be a class name or dom tag name, the default value is `body`|\n|  backgroundColor  | `string`, background color of the svg container, the default value is `#fafafa` |\n|  data  | `array`, all nodes data definition, the data struct can be seen above |\n|  highlight  | `object`, define highlight styles of the current node |\n|  current  | `string`, mark the current chosen node |\n|  duration  | `number`, the transition duration, the default value is `600` |\n|  strokeWidth  | `number`, the stroke width of node, the default value is `3` |\n|  linkColor  | `object`, the rgba color object of link, the default value is `3` |\n|  linkWidth  | `number`, the stroke width of link, the default value is `5` |\n|  initialZoom  | `number`, the initial zoom scale, the default value is `0.4` |\n|  orientation  | `string`, the layout orientation, which value is one of `left-to-right`、`right-to-left`、`top-to-bottom`、`bottom-to-top`, and the default one is `right-to-left` |\n|  collapsible  | `boolean`, show the expand/collapse button, the default value is `false`, if its value is `false`, all `expanded` property in each data object will not take in effect  |\n|  displayArrow  | `boolean`, show the link arrow, the default value is `true` |\n|  straightLink  | `boolean`, display the link with straight line, the default value is `false`, transform it to curve line when set the property to `true`|\n\n|  Method  | Usage |\n|  --- | --- |\n|  onNodeClick(nodeId)  | `function`, callback after node clicked |\n|  onNodeAdd(nodeId)  | `function`, callback after the add button clicked |\n|  onNodeRemove(nodeId)  | `function`,callback after the remove button clicked |\n\n|  Callback  | Usage |\n|  --- | --- |\n|  transformLayout(orientation)  | `function`, change the the layout orientation, the passed value can be `left-to-right`、`right-to-left`、`top-to-bottom`、`bottom-to-top` |\n|  transformStraightLink(straightLink)  | `function`, change the the link style to straight line, the passed value can be `false`、`true` |\n|  toggleArrow(display)  | `function`, toggle visibility of link arrow, default value is `false` |\n|  addNode(nodeJson)  | `function`, add a children node under a parent node you clicked |\n|  removeNode(nodeId)  | `function`, remove a node by the nodeId |\n\n## Changelog\n\n**0.0.9** Changes:\n\n* Make it compatible with the latest version of d3\n\n**0.0.8** Changes:\n\n* Fixed bugs for svg element position\n\n**0.0.7** Changes:\n\n* Added an exported switch property for controls of the expand and collapse button\n\n**0.0.6** Changes:\n\n* Re-adjusted position of the add and remove buttons\n* Add expand and collapse buttons to manually show and hide sub-nodes\n\n**0.0.5** Changes:\n\n* Added function for transform link line style\n* Set default link style as curve line\n\n**0.0.4** Changes:\n\n* Added control for arrows visibility\n* optimized link position\n\n**0.0.3** Changes:\n\n* Fixed node distance bug\n* Added a vue integrated demo\n\n**0.0.2** Changes:\n\n* Added layout orientation support\n* Completed documentation\n\n**0.0.1** Changes:\n\n* The initial version first publish to npm library\n\n## Contributing\n\nIf the existing component doesn't meet your needs, fork the project, implement the future and an example using it, send us a pull request, for consideration for inclusion in the project.\n\nIf you'd like to contribute consistently, show me what you've got with some good pull requests!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenyasin%2Fd3-org-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenyasin%2Fd3-org-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenyasin%2Fd3-org-tree/lists"}