donatso / family-chart Goto Github PK
View Code? Open in Web Editor NEWfamily tree visualization built on top of d3
License: MIT License
family tree visualization built on top of d3
License: MIT License
How to implement manualZoom in family-chart?
I'm using React JS
I have a Google Sheet for creating family tree data to import into yed. After finding the "family-chart" project, I added a sheet to transform the sheet data to the "family-chart" json format.
To use the Google Sheet...
is that possible to add sibling node of main node?
Hello Donatso!
Q1. I want to know is there any ways to stop the expand tree's animation, or expand faster?
Q2. Is there any ways to stop translate when I click those cards?
This family-chart is very amazing, thank you so much!!!
multiple spouses can we add?
It is hard to make use of functionalities in react, having a react hook will go a long way.
I want to be able to create forms in react, currently had to make use of your js example form.
A types declarations would also be helpful for typescript.
Hi Donatso,
Your library is great🥇for family tree implementation.
Can we add/update family tree dynamically instead of copying from the examples/create-tree? actually I am trying to accomplish family tree on react project(typescript).
It will be good scenario for updating family tree without touching the backend code.
Thanks for your support.
this will work on react-native?
this is the second query i make, is it possible to zoom to a particular card.
Thank you very much in advance and so that there is a certain reciprocity I am going to collaborate with a way to use your library in angular
https://codesandbox.io/s/ng-family-chart-cjh8sf?file=/src/app/app.component.ts
Hello! First, I want to thank you for such a cool decision. I also have a question, how can you expand the direction of the tree to the other side? so that parents are under children and not above them (as now)
Hi @donatso !
I want you to support search user.
Or maybe a select box all user, when clicking on a user, the chart automatically focus on that user.
Hello Donatso,
I really loved your project and i have started to build one with my lineage. While working on it, i came across few scenarios, looking for your help around this...
Hello, I have a large tree and when I click on a sub node, I lose the family in the big canvas.
so the item i clicked must be navigated to center.
First of all, thanks for the incredible effort.
Let's say that I would like to show divorced couples with a dashed relationship line, is that possible?
Thanks again for your time
Ability to read and render a family tree from a GEDCOM data file.
I searched for this but I don't see anywhere. I want to add event onClick on the card so I can do other things such as show full info. Could you help? Also anywhere I can see the full options/parameter or all the methods? Thanks
I want to set the main view's background color to be white and the path line color to be black.
However, I can set the backgroup color, but cannot find the setting of the path line.
Any suggestion will be great.
Hi, I find this module interesting and tried to implement to NextJS based on code generated on https://donatso.github.io/family-chart/examples/create-tree/
I wrap all componentDidMount
to a useEffect
hook, createRef
with useRef
hook.
I did a conditional if everything was mounted based on .current
presence from the ref.
However it did not run as expected and returning the exact d3.select(...).transition is not a function
error which I assume this was came from the family-chart
that d3 module was not yet loaded, I've attached my code I working on this page.
'use client'
import { Suspense, useEffect, useRef } from 'react'
import f3 from 'family-chart'
import '@/styles/family-tree.css'
export default function RelationshipAnalisis() {
const treeRef = useRef<HTMLDivElement>(null)
const treeData = [
{
"id": "0",
"rels": {
"father": "83285456-43d8-44bd-bbf1-9204bd69111e",
"mother": "fe5debe3-2ff0-4bf5-be51-317f595575d5",
"spouses": [
"588da99f-31df-4887-b4c1-163e4d2a6cee"
]
},
"data": {
"first name": "Name",
"last name": "Surname",
"birthday": 1970,
"avatar": "https://static8.depositphotos.com/1009634/988/v/950/depositphotos_9883921-stock-illustration-no-user-profile-picture.jpg",
"gender": "M"
}
},
{
"id": "83285456-43d8-44bd-bbf1-9204bd69111e",
"data": {
"gender": "M",
"first name": "",
"last name": "",
"birthday": "",
"avatar": ""
},
"rels": {
"children": [
"0"
],
"spouses": [
"fe5debe3-2ff0-4bf5-be51-317f595575d5"
]
}
},
{
"id": "fe5debe3-2ff0-4bf5-be51-317f595575d5",
"data": {
"gender": "F",
"first name": "",
"last name": "",
"birthday": "",
"avatar": ""
},
"rels": {
"spouses": [
"83285456-43d8-44bd-bbf1-9204bd69111e"
],
"children": [
"0"
]
}
},
{
"id": "588da99f-31df-4887-b4c1-163e4d2a6cee",
"data": {
"gender": "F",
"first name": "",
"last name": "",
"birthday": "",
"avatar": ""
},
"rels": {
"spouses": [
"0"
]
}
}
]
useEffect(() => {
if (treeRef?.current) {
const store = f3.createStore({
data: treeData,
node_separation: 250,
level_separation: 150
})
const view = f3.d3AnimationView({
store,
cont: document.querySelector("#FamilyChart")
})
const Card = f3.elements.Card({
store,
svg: view.svg,
card_dim: { w: 220, h: 70, text_x: 75, text_y: 15, img_w: 60, img_h: 60, img_x: 5, img_y: 5 },
card_display: [(d: { data: { [x: string]: any } }) => `${d.data['first name'] || ''} ${d.data['last name'] || ''}`, (d: { data: { [x: string]: any } }) => `${d.data['birthday'] || ''}`],
mini_tree: true,
link_break: false
})
view.setCard(Card)
store.setOnUpdate((props: any) => view.update(props || {}))
store.update.tree({ initial: true })
}
}, [treeRef.current])
return (
<div className="px-12 sm:px-32">
<h2 className="text-xl font-medium">Hubungan</h2>
<Suspense>
<div id="treeWrapper" className="w-full h-96">
<div className="f3" id="FamilyChart" ref={treeRef}></div>
</div>
</Suspense>
</div>
)
}
i want to show third line in the node below birthday how to add it? also want to give class to card along with male female how to do it?
The images displayed on the graph is reloaded when I even click the same node (I can see they are requested in network monitor) and they flicker. An optimization for this would be good.
Is there a way to handle rendering a very large family tree? It seem to choke and the interaction is very very slow.
The example seems to work perfectly fine but when I try to port it to react it doesn't seem to work with a rewrite as well. The app without the search works but the search wouldn't. Plus in the example file the data is from Wiki, can that be injected with a JSON, cant seem to figure it out.
Simple js search example with local data would be great
I tried adding another tspan in the js file but it doesn't seem to render the third line. Is there something I am missing / can it be added as a feature?
Hi, I'm working on family tree in my spare time and I come across your package which would work perfect for me but I having issue using it with above combination.
I wonder if you'll be able to help me resolve the problem?
When importing f3 as in your React example
import f3 from "family-chart"; // npm i family-chart
I get error:
[plugin:vite:import-analysis] Failed to resolve entry for package "family-chart". The package may have incorrect main/module/exports specified in its package.json.
I've asked for help laravel community but none of the suggestions worked so I thought I'll reach out to you.
Here is a link to post in laracasts forum.
https://laracasts.com/discuss/channels/vite/laravel-10-vite-react-problem-importing-npm-packages
Regards.
My project configuration is: node 20.6.0, vue 3.2.0, vuetify 3.4.9, vite.
When I try to embed family-chart I got error: [plugin:vite:import-analysis] Failed to resolve entry for package "family-chart". The package may have incorrect main/module/exports specified in its package.json.
Any suggestions how to fix it?
Can I add step father & mother?
hello.
your library is great. I wanted to ask you how to use the manualzoom method
I think the js should come with search (like wiki-search example) or it should be activated with a parameter.
I want a function to divide level
I tried many ways and it still doesn't show all nodes
can someone please tell me how to setup and run the project in our local
Hello Donatso, I would like to use my last wish :).
I tried to use the custom element but failed miserably.
Could you post a working example?
From already thank you very much
Hello @donatso!
How we can fully expand the tree? I've tried to edit toggleAllRels
. But no results. I have no idea what I should do.
Could you help me?
Please publish the list of all props of the constants store, view and Card respectively that can be changed. I have elaborated the issue below:
const store = f3.createStore({
data: data(),
node_separation: 300,
level_separation: 170,
}),
view = f3.d3AnimationView({
store,
cont: document.querySelector("#FamilyChart"),
}),
Card = f3.elements.Card({
store,
svg: view.svg,
card_dim: {
w: 250,
h: 70,
text_x: 75,
text_y: 15,
img_w: 60,
img_h: 60,
img_x: 5,
img_y: 5,
},
card_display: [
(d) => `${d.data["first name"] || ""} ${d.data["middle name"].charAt(0)+"." || ""} ${d.data["last name"] || ""}`,
(d) => `${d.data["birthday"] || ""}`,
],
mini_tree: true,
link_break: true,
});
For example, in the above code we have passed the props to render customized data but in the same format as you have created in the package, in the same way.
If you can publish the list of all such properties and data types they accept, (props) which do not cause bugs on changing them.
I hope you got my point. I think that this feature will add more flexibliity in building application using this package.
Thanks, kindly and hopefully waiting for a response back
Hi, I need to expand all the trees. Is there any ways to make it? I try to update your code in family-chart.js, but it doesn't work.Help~~
Is there a way we could write our own html templates for the nodes ?
Can we make some nodes special like round?
Could you include a minimap like in
https://balkan.app/FamilyTreeJS/Demos/multiple-templates-family-tree
How can I remove transition that shows the family tree on it enter to screen, I kinda want it to show instantaneous
Hello,I tried to import this proj on examples/create-tree/,but I found it didn't work in some cases in my Vue proj.
First,pencil and add icon didn't appear,so i found it miss some params: 'cardEditForm' and 'addRelative'.But I don't know what the parameters consists of.How should I write two arguments?
Thank you ! :)
const store = await f3.createStore({
data: await data(),
node_separation: 250,
level_separation: 150,
}),
view = f3.d3AnimationView({
store,
cont: document.querySelector("#FamilyChart"),
}),
Card = f3.elements.Card({
store,
svg: view.svg,
card_dim: {
w: 220,
h: 70,
text_x: 75,
text_y: 15,
img_w: 60,
img_h: 60,
img_x: 5,
img_y: 5,
},
card_display: [
(d) => `${d.data["first_name"] || ""} ${d.data["last_name"] || ""}`,
(d) => `${d.data["birthday"] || ""}`,
],
mini_tree: true,
link_break: false,
// cardEditForm: () => {}, ??
// addRelative: () => {}, ??
});
view.setCard(Card);
store.setOnUpdate((props) => view.update(props || {}));
store.update.tree({ initial: true });
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.