An implementation of d3 graph to construct flow chart(d3 topological graph(tree)).
Getting Started
- Step 1- yarn add react-native-tree-graph react-native-svg
- Step 2- react-native link react-native-svg
- Step 3- Build the project and watch the beauty.
import AwesomeHierarchyGraph from 'react-native-tree-graph'
var root = {
name: "Root",
id: 1,
hidden: true,
children: [
{
name: "Node 1",
id: 16,
no_parent: true,
children: [
{
name: "Sub Node 1",
id: 3,
no_parent: true
},
{
name: "Sub Node 2",
id: 4,
no_parent: true
}
]
}
]
}
var siblings = [
{
source: {
id: 3,
name: "Sub Node 1"
},
target: {
id: 4,
name: "Sub Node 2"
}
}
]
export default class Home extends Component {
render() {
return (
<View style={styles.container}>
<AwesomeHierarchyGraph
root = {root}
siblings = {siblings}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Properties
Name | Type |
---|---|
root | object |
siblings | array |
Todo list:-
-
Props to handle styling of nodes.
-
Callbacks.
-
Add animation to the graph
-
Add test
Author
Name: LuanLuu Email: luanluuhaui@gmail.com
License
MIT