react-native-tree-graph
v1.0.1
Published
An implementation of d3 graph to construct flow chart(d3 topological graph(tree)).
Downloads
32
Maintainers
Readme
react-native-tree-graph
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: [email protected]
License
MIT