Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use with React Js?

See original GitHub issue

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 id="graph"></div>

export default FamTree;

I am getting “d3 is not defined”


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

mk48commented, Apr 30, 2018

thanks @theoperatore , below code solved the issue

// in your src/index.js
import * as d3 from 'd3';
window.d3 = d3;
theoperatorecommented, Apr 29, 2018

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tutorial: Intro to React
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated...
Read more >
React Getting Started - W3Schools
To use React in production, you need npm which is included with Node.js. To get an overview of what React is, you can...
Read more >
What is React.js? (Uses, Examples, & More) - HubSpot Blog
The React.js framework is an open-source JavaScript framework and library developed by Facebook. It's used for building interactive user ...
Read more >
How to Get Started With React – A Beginner's Guide
React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for creating UI component-based user ...
Read more >
Getting started with React - Learn web development | MDN
React uses an HTML-in-JavaScript syntax called JSX (JavaScript and XML). Familiarity with both HTML and JavaScript will help you to learn JSX, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found