How we can render graph in react native using dagre-d3 ?

[ap050492]

I trying to load graph using dagre-d3 in react native. Please find sample code below

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  StatusBar,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import * as d3 from 'd3';
import * as dagreD3 from 'dagre-d3';
import {Svg, G} from 'react-native-svg';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.renderGraph();
  }

  renderGraph = () => {
    var g = new dagreD3.graphlib.Graph().setGraph({});

    g.setNode('root', {
      label: 'Root',
      padding: 5,
    });

    console.log(g.hasNode('root'));

    g.setNode('A', {
      labelType: 'Plain',
      label: 'A',
      width: 300,
      height: 200,
    });
    g.setNode('B', {
      labelType: 'Plain',
      label: 'B',
      width: 300,
      height: 200,
    });
    g.setNode('C', {label: 'test', width: 300, height: 200});
    g.setNode('D', {label: 'test2', width: 300, height: 200});
    g.setEdge('root', 'A', {});
    g.setEdge('root', 'B', {});
    g.setEdge('B', 'C', {});
    g.setEdge('A', 'C', {});
    g.setEdge('B', 'D', {});
    var render = new dagreD3.render();
    let svg = d3.select(this.nodeTree);
    let inner = d3.select(this.nodeTreeGroup);
    render(inner g);

  };

  render() {
    return (
      <View style={styles.scrollView}>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>         
          <Svg
            ref={r => {
              this.nodeTree = r;
            }}
            width={800}
            height={800}>
            <G
              ref={r => {
                this.nodeTreeGroup = r;
              }}
            />
          </Svg>
        </SafeAreaView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
    flex:1,
  },  
});

[Gordon Woodhull]

This is really a React question, not specific to dagre-d3. Look at how other D3 examples are wrapped using React and it should be similar.

[Justin Coberly]

@ap050492 I made a package for reactJS, not sure if it works for react-native but you can probably tailor it to fit your needs. https://github.com/justin-coberly/dagre-d3-react

[Ahmed Yasser]

@ap050492 any solution to this ??