{"_id":"@allenakinkunle/d3-org-tree","name":"@allenakinkunle/d3-org-tree","dist-tags":{"latest":"0.0.9"},"versions":{"0.0.9":{"name":"@allenakinkunle/d3-org-tree","version":"0.0.9","description":"A highly customizable org tree built with d3.js v6","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/allenakinkunle/d3-org-tree.git"},"keywords":["d3","org-tree","hierarchy","customizable"],"dependencies":{"d3":"*"},"author":{"name":"benyasin"},"license":"ISC","bugs":{"url":"https://github.com/benyasin/d3-org-tree/issues"},"homepage":"https://github.com/benyasin/d3-org-tree#readme","gitHead":"0e577ed932af35d5ac8e5e950ff1313ef73e93ef","_id":"@allenakinkunle/d3-org-tree@0.0.9","_nodeVersion":"19.5.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-x+WA3mCZw2LXi9BNSQcL7YfJo/XrbswuiCpT4ULc4KObKChp893dYJ99jmwiTDKA/d8Uqfw/6fSTfkBDmBMfPA==","shasum":"a941d74ae38583e86d27b8674d5ab339890ef506","tarball":"https://registry.npmjs.org/@allenakinkunle/d3-org-tree/-/d3-org-tree-0.0.9.tgz","fileCount":4,"unpackedSize":48404,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJnHq4InUxTj9z9TP25z5zzJTjinXpJFZeyPy8RIzcJQIhALR+nXJuzPlIYg/RgrMvReA37fu2pF1hzxUXqnKygrV5"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6mjhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXpQ/+NeLSxujSSuwFiNSIApVebfRUfL32EcYHKDhUFjxsRH0XUX1A\r\nJbLGv2Mz/hRuB7o8n1Ck0p/cuEivKPic4TE/Lrpo3P+morCqCEagQkqb6Lad\r\nsJphnolWhuEdYwl12uEezMHmBAS3s9fRyxPzd75X+pO3nha8BZyEPve0fzRZ\r\nyEbPl15RVqUcP8tsMcjpEK/dePZnM9NNDUo2g5h9Ac62COyi/rR9vUX8mapt\r\nTQ5gmzB76FHdmU5HEODidbyzOGCBwainoJWd9+EQMzB1r785x+YLkj2oE9LY\r\nrI1iOhZLgJGl9hfRb4vzbnrNNecGKKvifsruob+BXSmihkQFEcr35tkD7/P8\r\ncWWaMKQIX1n9p2HkxhCbArPFxv1oYG1NrTXztgajIKDaBFQD8NUK1bOQpi6e\r\nKVZsK6pmT2vJCF4CFvqOF48WKDqRnak0qUQTrd9rCBddg3ng+kXPn5pp3gOA\r\nd9M0Rrw6xqQTpmusmdPY4vrRG4RL+XYqlFblj/6jsu2b9ZyO3dOvjmflhF54\r\nMrA1ZV5nJKCZIn0xMYWr9VUOI14q1NUZfMiG/lyoMKIMKYtJa3r5F1DJnrl1\r\nKx003EWiNSOgJiwUST/VJ+IjSLM0U2W9GBnPP9Omr/5Km+8YewMpmTpsfSKY\r\nBE65CtR4J0B11n7lsKapx1rbNqK86K4m3/c=\r\n=DFW9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"allenakinkunle","email":"allenkunle@icloud.com"},"directories":{},"maintainers":[{"name":"allenakinkunle","email":"allenkunle@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d3-org-tree_0.0.9_1676306657186_0.6892577499734691"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-13T16:44:16.999Z","0.0.9":"2023-02-13T16:44:17.405Z","modified":"2023-02-13T16:44:17.592Z"},"maintainers":[{"name":"allenakinkunle","email":"allenkunle@icloud.com"}],"description":"A highly customizable org tree built with d3.js v6","homepage":"https://github.com/benyasin/d3-org-tree#readme","keywords":["d3","org-tree","hierarchy","customizable"],"repository":{"type":"git","url":"git+https://github.com/allenakinkunle/d3-org-tree.git"},"author":{"name":"benyasin"},"bugs":{"url":"https://github.com/benyasin/d3-org-tree/issues"},"license":"ISC","readme":"[](https://github.com/benyasin/d3-org-tree/stargazers)\n[](https://github.com/benyasin/d3-org-tree/issues)\n[](https://github.com/benyasin/d3-org-tree/network)\n[](https://github.com/benyasin/d3-org-tree)\n\n\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* Vue integration demo\n\n\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 => {\n console.log(d + \" node clicked\")\n })\n .onNodeAdd(d => {\n console.log(d + \" node added\")\n orgTree.addNode(/*added node json*/)\n })\n .onNodeRemove(d => {\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\": \"\\nBen
\",\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\": \"Honey
\",\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!","readmeFilename":"README.md"}![](\"https://user-images.githubusercontent.com/1866848/112085779-165e5b00-8bc6-11eb-9fea-82498bb953d5.png\")
\n \n