react-native-d3-tree-graph

An implementation of d3 graph to construct flow chart(d3 topological graph(tree)).

Getting Started

• Step 1- npm install react-native-d3-tree-graph --save
• Step 2- react-native link react-native-svg
• Step 3- Build the project and watch the beauty.

Usage Note: For proper understanding see the example

import AwesomeHierarchyGraph from 'react-native-d3-tree-graph'

var root = {
    name: "",
    id: 1,
    hidden: true,
    children: [ {
            name: "Q",
            id: 16,
            no_parent: true
        }]
    }

var siblings = [{
    source: {
        id: 3,
        name: "C"
    },
    target: {
        id: 11,
        name: "K"
    }
 }]
 
export default class example 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 | PropTypes.object| | siblings | propTypes.array |

Todo list:-

• Props to handle styling of nodes.

• Callbacks.

• Add animation to the graph

• Add test

Author

Anoop Singh (codesingh)
Email: [email protected]
Stack Overflow: codesingh(username)

License

MIT