How to use with React Js?

[mk48]

Thanks for the excellent library.

I just tried to use with React Js and couldn't get through. Below is my approach. Could any please help me on this?

import React from 'react';
import dTree from 'd3-dtree';
import _ from 'lodash';
import * as d3 from "d3";

class FamTree extends React.Component { 
  componentDidMount() {
    let treeData = [{
      name: "Father",
      depthOffset: 1,
      marriages: [{
        spouse: {
          name: "Mother",
        },
        children: [{
          name: "Child",
        }]
      }],
      extra: {}
    }];

    dTree.init(treeData, {target: "#graph", height:800, width: 1200, debug:true});
  }

  render() {
    return (
      <div>
        <div id="graph"></div>
      </div>
    );
  }
}

export default FamTree;

I am getting "d3 is not defined"

[ErikGartner]

I'm not that familiar with react. Basically you just need to make that D3 is loaded before loading dTree.

[mk48]

I will try to find a way, If I get any then I will post my answer here.

[theoperatore]

@mk48 I believe the library depends on d3 being available globally. so something like

// in your src/index.js
import d3 from 'd3';
...
window.d3 = d3;

should do the trick.

[mk48]

thanks @theoperatore , below code solved the issue

// in your src/index.js
import * as d3 from 'd3';
...
window.d3 = d3;

[atefBB]

@mk48 I believe the library depends on d3 being available globally. so something like

// in your src/index.js
import d3 from 'd3';
...
window.d3 = d3;

should do the trick.

I think this is not recommanded in react (to assign a new variable to window) !