{"id":18783446,"url":"https://github.com/futuresea-dev/dagre-d3-react","last_synced_at":"2025-12-20T15:30:32.099Z","repository":{"id":157980011,"uuid":"471186816","full_name":"futuresea-dev/dagre-d3-react","owner":"futuresea-dev","description":"dagre-d3-react","archived":false,"fork":false,"pushed_at":"2022-03-18T00:36:02.000Z","size":758,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-29T11:44:45.547Z","etag":null,"topics":["javascript","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/futuresea-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2022-03-18T00:35:15.000Z","updated_at":"2024-03-28T17:16:09.000Z","dependencies_parsed_at":"2024-08-25T16:30:29.045Z","dependency_job_id":null,"html_url":"https://github.com/futuresea-dev/dagre-d3-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/futuresea-dev%2Fdagre-d3-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/futuresea-dev%2Fdagre-d3-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/futuresea-dev%2Fdagre-d3-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/futuresea-dev%2Fdagre-d3-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/futuresea-dev","download_url":"https://codeload.github.com/futuresea-dev/dagre-d3-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239699579,"owners_count":19682574,"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":["javascript","react","typescript"],"created_at":"2024-11-07T20:39:22.540Z","updated_at":"2025-12-20T15:30:26.555Z","avatar_url":"https://github.com/futuresea-dev.png","language":"TypeScript","readme":"# dagre-d3-react\n\nDagre D3 Graph Renderer built on [DagreD3](https://github.com/dagrejs/dagre-d3)\n\n## Browsers\n\n- support IE11+, Chrome, Firefox, Safari\n\n## Screenshots\n\n\u003cimg src=\"./screenshots/example.png\" /\u003e\n\n## Install\n\n[![dagre-d3-react](https://nodei.co/npm/dagre-d3-react.png)](https://www.npmjs.com/package/dagre-d3-react)\n\n## Usage\n\n**_Update_**\nrankdir prop has been updated in version 0.2.0\nIt has now been replaced with `config` and the new options can be found [here](https://github.com/dagrejs/dagre/wiki#configuring-the-layout)\n\n```jsx\nimport DagreGraph from 'dagre-d3-react'\n\nReactDOM.render(\n\t\u003cdiv\u003e\n\t\t\u003cDagreGraph\n\t\t\tnodes={nodes}\n\t\t\tlinks={links}\n\t\t\tconfig={{\n\t\t\t\trankdir: 'LR',\n\t\t\t\talign: 'UL',\n\t\t\t\tranker: 'tight-tree'\n\t\t\t}}\n\t\t\twidth='500'\n\t\t\theight='500'\n\t\t\tanimate={1000}\n\t\t\tshape='circle'\n\t\t\tfitBoundaries\n\t\t\tzoomable\n\t\t\tonNodeClick={e =\u003e console.log(e)}\n\t\t\tonRelationshipClick={e =\u003e console.log(e)}\n\t\t/\u003e\n\t\u003c/div\u003e,\n\tcontainer\n)\n```\n\n## Example CSS Styles\n\n```css\n.nodes {\n\tfill: darkgray;\n}\n.nodes text {\n\tfill: white;\n}\n\npath {\n\tstroke: black;\n\tfill: black;\n\tstroke-width: 1.5px;\n}\n```\n\n## API\n\n### props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n  \u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n    \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n    \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n    \u003cth\u003edescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodes\u003c/td\u003e\n      \u003ctd\u003earray\u003c/td\u003e\n      \u003ctd\u003eundefined\u003c/td\u003e\n      \u003ctd\u003eList of node objects {label:'', id:'', class: ''}\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003elinks\u003c/td\u003e\n      \u003ctd\u003earray\u003c/td\u003e\n      \u003ctd\u003eundefined\u003c/td\u003e\n      \u003ctd\u003eList of link objects {source: '', target: '', class: '', label: ''}\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ezoomable\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eAllows scroll to zoom on graph\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efitBoundaries\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003efalse\u003c/td\u003e\n      \u003ctd\u003eAutosizes graph to fit container\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n\t\t  \u003ctd\u003eheight\u003c/td\u003e\n\t\t  \u003ctd\u003estring\u003c/td\u003e\n\t\t  \u003ctd\u003e500\u003c/td\u003e\n\t\t  \u003ctd\u003eDefault height of svg\u003c/td\u003e\n\t\t\u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ewidth\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003e500\u003c/td\u003e\n      \u003ctd\u003eDefault width of svg\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003econfig\u003c/td\u003e\n      \u003ctd\u003eobject\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eSee configuration options \u003ca href='https://github.com/dagrejs/dagre/wiki#configuring-the-layout'\u003ehere\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eanimate\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003e1000\u003c/td\u003e\n      \u003ctd\u003eEnables animation with duration in milliseconds\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eshape\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003ecircle\u003c/td\u003e\n      \u003ctd\u003eSVG node shape: 'rect' | 'circle' | 'ellipse'\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eclassName\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eAssign custom class to svg element\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonNodeClick\u003c/td\u003e\n      \u003ctd\u003eFunction\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eCallback on node click\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonRelationshipClick\u003c/td\u003e\n      \u003ctd\u003eFunction\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eCallback relationship click (specifically the label)\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Node Object\n\n```typescript\n  {\n    id: string,\n    label: string,\n    class?: string,\n    labelType?: 'html' | 'svg' | 'string',\n    config?: object\n  }\n```\n\n### Link Object\n\n```typescript\n  {\n    source: any,\n    target: any,\n    class?: string,\n    label?: string,\n    config?: object\n  }\n```\n\n## Neo4j Example\n\n```javascript\nlet data = await axios.post('/commit', {statements: [\n    {statement: \"match (a)-[r1]-\u003e(b) return a, r1, b\", resultDataContents: ['graph']}\n  ]\n})\n\nlet dagreData = {\n  nodes: [],\n  links: []\n}\n\ndata.data.results[0].data.forEach(row =\u003e {\n  row.graph.nodes.forEach(node =\u003e dagreData.nodes.push(row))\n  row.graph.relationships.forEach(node =\u003e dagreData.links.push(row))\n})\n\nreturn (\n  \u003cDagreGraph nodes={dagreData.nodes} links={dagreData.links}\u003e\n)\n```\n\n## Node Render HTML\n\n```javascript\nlet data = {\n  nodes: [\n    {\n      id: \"1\",\n      label: \"\u003ch3\u003eNode 1\u003c/h3\u003e\",\n      labelType: \"html\"\n    },\n    {\n      id: \"2\",\n      label: \"\u003ch3\u003eNode 2\u003c/h3\u003e\",\n      labelType: \"html\",\n      config: {\n\t\t\t  style: 'fill: #afa'\n\t\t  }\n    }\n  ],\n  links: [\n    {\n      source: '1',\n      target: '2',\n      label: 'TO',\n      config: {\n\t\t\t  arrowheadStyle: 'display: none',\n\t\t\t  curve: d3.curveBasis,\n\t\t\t  style: 'fill:none'\n      }\n    },\n  ]\n}\n\n\u003cDagreGraph nodes={dagreData.nodes} links={dagreData.links}\u003e\n```\n\n## License\n\ndagre-d3-react is released under the MIT license.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuturesea-dev%2Fdagre-d3-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuturesea-dev%2Fdagre-d3-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuturesea-dev%2Fdagre-d3-react/lists"}