react-native-d3-tree-graph

A topological graph implementation using d3 graphs.

Usage no npm install needed!

<script type="module">
  import reactNativeD3TreeGraph from 'https://cdn.skypack.dev/react-native-d3-tree-graph';
</script>

README

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: anoop100singh@gmail.com
Stack Overflow: codesingh(username)

License

MIT