Skip to main content
  1. About
  2. For Teams
Asked
Viewed 560 times
0

I'm trying to use react-tree-graph with ReactJS to create a hierarchical tree. I'm trying to reproduce the example from GitHub before replacing the data with my own but nothing renders when I start my react app. I'm not getting any errors in the developer tools so I'm having a hard time finding the issue. Do I need to add the script to an HTML file instead of a standalone react app?

ReactJS Code:

import Tree from 'react-tree-graph';
import './index.css';

const data = {
    name: 'Parent',
    children: [{
        name: 'Child One'
    }, {
        name: 'Child Two'
    }]
};

<div className="custom-container">
    <Tree
        data={data}
        height={200}
        width={400}
    />
</div>

CSS:

div.custom-container {
    background-color: #242424;
}

svg.custom .node circle {
    fill: #F3F3FF;
    stroke: #2593B8;
    stroke-width: 1.5px;
}

svg.custom .node text {
    font-size: 11px;
    background-color: #444;
    fill: #F4F4F4;
    text-shadow: 0 1px 4px black;
}

svg.custom .node {
    cursor: pointer;
}

svg.custom path.link {
    fill: none;
    stroke: #2593B8;
    stroke-width: 1.5px;
}

1 Answer 1

2

There is no return or render, Check the sandbox code:

import React from "react";
import Tree from "react-tree-graph";
import "./styles.css";

const data = {
  name: "Parent",
  children: [
    {
      name: "Child One"
    },
    {
      name: "Child Two"
    }
  ]
};
export default function App() {
  return (
    <div className="custom-container">
      <Tree data={data} height={200} width={400} />
    </div>
  );
}


Sign up to request clarification or add additional context in comments.

Comments

Your Answer

Post as a guest

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Morty Proxy This is a proxified and sanitized view of the page, visit original site.