0

I am trying to create a dendrogram using a D3 JavaScript component I found on Github. Here's the link: https://www.npmjs.com/package/react-d3-tree I am fairly new to this whole thing, so I am having difficulty figuring out how to use this to create a web application that I can actually run, like what's shown in the demo (https://bkrem.github.io/react-d3-tree-demo/) Ideally I would like to import my own .json data, but once I have it running I'm sure I can figure that out fairly easily. Any advice would be greatly appreciated, thank you.

Attempted running the application by finding the directory in Windows command prompt and using the command npm start.

I think that I don't have the proper scripts for executing a program that will display on my localhost server.

Stephanie
  • 1

1 Answers1

1

I tried running the code from the Example given on www.npmjs.com/package/react-d3-tree on Codesandbox.io. It worked Perfectly as expected. I am sure it will work on localhost as well. Here is the Code

    import React from 'react';
    import Tree from 'react-d3-tree';
    //Static JSON you can always use json from a different file
    const myTreeData = [
      {
        name: 'Top Level',
        attributes: {
          keyA: 'val A',
          keyB: 'val B',
          keyC: 'val C',
        },
        children: [
          {
            name: 'Level 2: A',
            attributes: {
              keyA: 'val A',
              keyB: 'val B',
              keyC: 'val C',
            },
          },
          {
            name: 'Level 2: B',
          },
        ],
      },
    ];
    export default class MyTree extends React.Component {
      render() {
        return (
        //Wrapper
          <div id="treeWrapper" style={{width: '50em', height: '20em'}}>
          //Calling the actual library with json as a prop
            <Tree data={myTreeData} />
          </div>
        );
      }
    }
Archies
  • 111
  • 6
  • I guess what I'm missing is how to wrap this as an application that will execute when I try running it on the localhost. I mean, if I just save this snippet of code as a Javascript file, then npm start in that directory, it doesn't run. I feel like this has to be a silly question, and there's some huge gap in my understanding – Stephanie Oct 30 '19 at 16:29
  • You are using create-react-app ? I gave this code for an existing React application. If you have React app in place, this should work just fine – Archies Oct 30 '19 at 16:40
  • So I use npx create-react-app then just add this as a separate .js file in the src folder? – Stephanie Oct 30 '19 at 16:52
  • Yup and render it in App.js as after importing it. – Archies Oct 30 '19 at 16:59
  • If I have the example .js code quoted above saved as mytree.js, can you show me what you've got in your App.js file? I'm trying to render mytree, but I keep getting errors. Thanks so much for your help, sorry, I'm very new to this! – Stephanie Oct 30 '19 at 17:50
  • Sure. You just need to have two statements in App.js First import MyTree.js **import MyTree from './MyTree'** Then in render method, in your Container **
    ** add following line ****     – Archies Oct 30 '19 at 18:30
  • I have created this [sandbox](https://codesandbox.io/s/github/archies-coder/react-tree/tree/master/) for you – Archies Oct 30 '19 at 18:39