Can it be used in a react or vue framework?

[vikashpisces]

Tried importing familyTree.js in a react project and it throws below error:

Error in /~/familyTree.js (129:25)
Class extends value undefined is not a constructor or null

It seems there is a circular reference and not allowing to run the FamilyTree class instances.

Sample code:

`import * as React from 'react';
import './style.css';
import {FamilyTree} from './familyTree.js';
import { data } from './data.js';
import * as d3 from 'd3';

const svg = d3
.select("body")
.append("svg")

let FT = new FamilyTree(data, svg);

export default function App() {
svg
.attr("width", document.body.offsetWidth)
.attr("height", document.documentElement.clientHeight);

// make family tree object

// draw family tree
FT.draw();

return (

Hello StackBlitz!

Start editing to see some magic happen :)

);
}
`

Can someone help?

[BenPortner]

Hi @vikashpisces!

Thanks for using js_family_tree! So far, I haven't tried to combine js_family_tree with React or Vue. However, I would be happy if we can get them to work together! 😃

Concerning your question: I am not sure about your setup there but shouldn't it be

import {FamilyTree} from './familytree.js'; // note the lower case t

?

Furthermore, please note that data.js, d3-dag.js and d3-tip.js must be imported before familytree.js. The order is important and should be as shown in the examples:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>
    <script src="js/d3-dag.js"></script>
    <script src="data/data_simple.js"></script>
    <script src="js/familytree.js"></script>

[vikashpisces]

Hey @BenPortner Thanks for responding. I tried the same approach importing the file and exporting Class FamilyTree too and have imported dependencies in the same order. It seems to be a problem of circular reference of the way Class is extending another class and that is extending another class, saying based on the error statement Class extends value undefined is not a constructor or null .

Would be nice if you can provide a sample example as how to use it with any framework, possibly react.

TIA.

[BenPortner]

Dear @vikashpisces,

I added a branch es-import-export, which allows using js_family_tree as an esm module as follows:

        import * as d3 from "https://cdn.skypack.dev/d3";
        import { data } from "./data/data.js";
        import FamilyTree from "./js/familytree.js";

        // insert svg object to hold the family tree
        const svg = d3.select("body").append("svg")
            .attr("width", document.body.offsetWidth)
            .attr("height", document.documentElement.clientHeight);

        // make family tree object
        let FT = new FamilyTree(data, svg);

        // draw family tree
        FT.draw();

Feel free to check the other examples for more configuration options.

Unfortunately, I cannot provide an example how to use js_family_tree with vue or react, as I have no experience with either one. I will be happy to include an example in the repository if you provide it, though 😃

Thanks for using js_family_tree!
Ben