react-d3-graph ·
Interactive and configurable graphs with react and d3 effortlessly
Playground
Here a live playground page where you can interactively config your own graph, and generate a ready to use configuration! 😎
Documentation 📖
Full documentation here.
Install
npm install react-d3-graph // using npmyarn add react-d3-graph // using yarn
Usage sample
Graph component is the main component for react-d3-graph components, its interface allows its user to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional). The code for the live example can be consulted here.
; // graph payload (with minimalist structure)const data = nodes: id: 'Harry' id: 'Sally' id: 'Alice' links: source: 'Harry' target: 'Sally' source: 'Harry' target: 'Alice' ; // the graph configuration, you only need to pass down properties// that you want to override, otherwise default ones will be usedconst myConfig = nodeHighlightBehavior: true node: color: 'lightgreen' size: 120 highlightStrokeColor: 'blue' link: highlightColor: 'lightblue' ; // graph event callbacksconst onClickNode = { window;}; const onMouseOverNode = { window;}; const onMouseOutNode = { window;}; const onClickLink = { window;}; const onMouseOverLink = { window;}; const onMouseOutLink = { window;}; <Graph id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error data=data config=myConfig onClickNode=onClickNode onClickLink=onClickLink onMouseOverNode=onMouseOverNode onMouseOutNode=onMouseOutNode onMouseOverLink=onMouseOverLink onMouseOutLink=onMouseOutLink/>
Roadmap 🛤
Want to know what's ahead for react-d3-graph? Or simply curious on what comes next and stuff that is under development? Check this trello board where everything related to react-d3-graph is managed.
Contributions
Contributions are welcome fell free to submit new ideas/features, just open an issue or send me an email or something. If you are more a hands on person, just submit a pull request.