sanichkotikov / react-family-tree Goto Github PK

I am using this package for my family tree, but when I access from mobile, I can't click to see the details, I think there is a problem in my code, but when I access your demo at url https://sanichkotikov.github.io/react-family-tree-example, I can't see the details on mobile either.

Please check this https://codesandbox.io/s/weevusissue-uvuk0?file=/src/components/App/App.tsx:2127-2173. I created tree in test-tree-n1.JSON and I want you to give some help for implementing like screenshot added below

Here is JSON data [ { id: "me", gender: "male", spouses: [], siblings: [], parents: [ { id: "father", type: "blood" }, { id: "mother", type: "blood" } ], children: [] }, { id: "father", gender: "male", spouses: [{ id: "mother", type: "married" }], siblings: [{ id: "fa_brother", type: "blood" }], parents: [ { id: "fa_Pa", type: "blood" }, { id: "fa_Ma", type: "blood" } ], children: [{ id: "me", type: "blood" }] }, { id: "mother", gender: "female", spouses: [{ id: "father", type: "married" }], siblings: [], parents: [ { id: "gg_Pa", type: "blood" }, { id: "gg_Ma", type: "blood" } ], children: [{ id: "me", type: "blood" }] }, { id: "gg_Pa", gender: "male", spouses: [{ id: "gg_Ma", type: "married" }], siblings: [], parents: [], children: [{ id: "mother", type: "blood" }] }, { id: "gg_Ma", gender: "female", spouses: [{ id: "gg_Pa", type: "married" }], siblings: [], parents: [], children: [{ id: "mother", type: "blood" }] }, { id: "fa_brother", gender: "male", spouses: [{ id: "fa_bro_spo", type: "married" }], siblings: [{ id: "father", type: "blood" }], parents: [ { id: "fa_Pa", type: "blood" }, { id: "fa_Ma", type: "blood" } ], children: [] }, { id: "fa_bro_spo", gender: "male", spouses: [{ id: "fa_brother", type: "married" }], siblings: [], parents: [], children: [] }, { id: "fa_Pa", gender: "male", spouses: [{ id: "fa_Ma", type: "blood" }], siblings: [], parents: [], children: [ { id: "father", type: "blood" }, { id: "fa_brother", type: "blood" } ] }, { id: "fa_Ma", gender: "female", spouses: [{ id: "fa_Pa", type: "blood" }], siblings: [], parents: [], children: [ { id: "father", type: "blood" }, { id: "fa_brother", type: "blood" } ] } ]

In this screenshot you can see that node is not displaying

I need to display that node when this particular node is selected whichYou can see that in screenshot below

First of all, thanks for this package! It is awesome! 👏 I really appreciate all the time you invested in it.

I'm using this package to render my family tree, but I'm getting weird behavior when I change the root id. As you can see in the picture there are couples sharing the same parents. I have checked the provided relations and they look ok. It only happens when I change the root. Never happened to me, with the initial root.

I'm not sure if is related to this commit you did a few months ago:

SanichKotikov/relatives-tree@71fb50a#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

If I can help with something, I'm open to collaborate

Server Error
SyntaxError: Cannot use import statement outside a module
module.exports = require("react-family-tree");

Hi
I'd like to increase thickness of connector lines. I tried to change some values in connector.js/tsx like hereafter:
...
width: Math.max(3, (x2 - x1) * width + 1),
height: Math.max(3, (y2 - y1) * height + 1),

but this breaks family tree display.

Thanks

During child as root node It is not displaying uncle node. It is only shows parents.
You can see it in below screenshot

https://prnt.sc/1re8zez

Please check this https://codesandbox.io/s/weevusissue-uvuk0 and select uncle-issue.json. I want you to help me in this issue.

Here is provided JSON data

[ { id: "0chil", gender: "male", spouses: [], siblings: [], parents: [{ id: "1fath", type: "blood" }], children: [] }, { id: "1fath", gender: "male", spouses: [], siblings: [{ id: "uncle", type: "blood" }], parents: [ { id: "grandPa", type: "blood" }, { id: "grandMa", type: "blood" } ], children: [{ id: "0chil", type: "blood" }] }, { id: "uncle", gender: "male", spouses: [], siblings: [{ id: "1fath", type: "blood" }], parents: [ { id: "grandPa", type: "blood" }, { id: "grandMa", type: "blood" } ], children: [] }, { id: "grandPa", gender: "male", spouses: [], siblings: [], parents: [], children: [ { id: "1fath", type: "blood" }, { id: "uncle", type: "blood" } ] }, { id: "grandMa", gender: "male", spouses: [], siblings: [], parents: [], children: [ { id: "1fath", type: "blood" }, { id: "uncle", type: "blood" } ] } ]

The new releases are causing our app to crash I'm not sure why. I wanted to ask about the subtitles. There are no labels shown to switch between different languages. Also are you planning to add the ability to switch between audio when a movie has more than one audio option ?

Is there any parameter to build a complete tree or what need to change in the code?

I need full tree )

Hi,

I have made some changes that all spouses nodes are shifted to left side.
So at one staging nodes are going to overlap to each other.

Can you plz help me to fix it.

As the package stands, there is no visual distinguishing divorced couples from married couples. Wondering how to change this?

This library seems very nice! I would like to have a try with this but I got this error and I can't able to figure out what is happening here...

I just created a sample clean repo here

I'm using node v16.11.1

Hope that helps :)

Hi, could you please provide example data structures for the visualized trees? I checked you uploaded some mock data in 2019, but it seems they are no longer compatible with the current version...

Thank you

Im trying to translate the node horizontally. so i modified the below code
" transform: translate(${node.left * (WIDTH / 2)}px, ${ node.top * (HEIGHT / 2) }px)"

              as

"transform:translate(${node.top * (WIDTH / 2)}px, ${
node.left * (HEIGHT / 2)
}px)`"

       the node is changed. But the connector/link isnt changing/ transforming. is there any way?

I've noticed that my oldest (top) part of the tree is super stretched - like it's trying to fit to the younger (bottom) branches containing more people (and taking more space). The older/top part of the tree is only a handful of people and I would like to see it more compressed, so the horizontal connecting lines are not stretched that far... Please see the attached file. Any ideas how to deal with this are very welcome.

Please write documentation

I have a condition where someone has more than 2 wives, namely he has 10 wives with the status of deceased and divorced, the expectation is that the position of the wife will be next to him with the position of 5 on the right and 5 on the left, but what happens is that 9 wives are on the left and 1 wife on the right. how can I make the position of all wives match my expectations.

Hi there, first of all thank you so much for this library. I tried using your library and this is what results. The connectors are showing up but the Cards are not being moved to where it is supposed to be. If you want to look at my code it is at

Not sure what to do, would you be able to help me? Thanks so much

Please provide an example of data
<ReactFamilyTree nodes={}

for nodes object as i am getting errors

i am not able to find any configration for displaying child node to single parent node
you can see this in below screenshot

https://prnt.sc/1re7iiy