Package Exports

rn-d3-tree-graph
rn-d3-tree-graph/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rn-d3-tree-graph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rn-d3-tree-graph

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

Getting Started

Step 1- npm install rn-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 'rn-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

Ilamparithi
Email: androelam@gmail.com

License

MIT