donatso / family-chart Goto Github PK

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)

this will work on react-native?

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.

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.

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

I want a function to divide level

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!!!

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

hello.
your library is great. I wanted to ask you how to use the manualzoom method

I tried many ways and it still doesn't show all nodes

Is there a way to handle rendering a very large family tree? It seem to choke and the interaction is very very slow.

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

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

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.

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?

so when I use state to toggle between views, it crashes when I try mounting back a tree component, works the first time but going back I get this.

Need a way to clean up when unmounting.

multiple spouses can we add?

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>
	)
}

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~~

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...

1. Can you help implement Search option on the chart!!
2. I am also trying to implement onclick event on Image so that the Image would blow up for better visibility.
3. Click on card to show more details..
4. Can we count the number of nodes excluding the hidden ones!!
5. Minimize larger nodes by default.

Ability to read and render a family tree from a GEDCOM data file.

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

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.

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?

How can I remove transition that shows the family tree on it enter to screen, I kinda want it to show instantaneous

can someone please tell me how to setup and run the project in our local

Can I add step father & mother?

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

Is there a way we could write our own html templates for the nodes ?
Can we make some nodes special like round?

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.

How to implement manualZoom in family-chart?
I'm using React JS

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?

Could you include a minimap like in
https://balkan.app/FamilyTreeJS/Demos/multiple-templates-family-tree

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.

is that possible to add sibling node of main node?

I think the js should come with search (like wiki-search example) or it should be activated with a parameter.

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 });

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?

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.

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...

1. make a copy of the Sheet https://docs.google.com/spreadsheets/d/1FSPUe2Emdm97p7TwcLmxBvJwUBFTIm6QRH6wZrZJvY0/copy
2. Enter Family tree information in the "People" tab
3. In the "treeChart" tab, copy column O
4. Create a page using the vanila html code from https://donatso.github.io/family-chart/examples/create-tree/