Open vikashpisces opened 2 years ago
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>
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.
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
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?