vis-network
vis-network copied to clipboard
visjs
What is the recommended configuration for vis-network for family tree graph
I apologize for asking questions here, but SO didn't help almost at all and I don't think this question can be answered by just anyone, because it kinda requires a bit deeper knowledge of how the lib works under the hood...
Short question is how to instruct vis-network library to minimize the sum of all the edges length in hierarchical layout mode (needed for the display of the family tree).
Instead of this:
how could we get this:
Maybe the length of the edges is not the key point here, but it would be great if we could configure the lib to minimize the number of edges intersections, at least.
If anyone could even point me to the correct source file, to take a look at, I would be willing to investigate this and hopefully provide a commit which makes this possible, if it's not already.
Maybe somebody wants to create a new example that demonstrates this? I also would love this!
I plan to do some changes that would make this doable (without fragile hacks). Namely custom ordering of nodes on the same level and edge crossing reduction. Since the other PRs messing with hierarchical layout are merged I can have a look at this next.
If I can help in any way, please let me know. I'll be more than happy to help with this feature. So far, I figured that nodes are ordered, on the same level, by their ID, so I managed to mitigate this issue by re-mapping node ids to custom ordered new ids, manually.
If I can help in any way, please let me know. I'll be more than happy to help with this feature. So far, I figured that nodes are ordered, on the same level, by their ID, so I managed to mitigate this issue by re-mapping node ids to custom ordered new ids, manually.
Hello, I am facing the same problem on hierarchical network and need to put nodes with particular order on each level of hierarchy. The trick with ID`s that are set in right order does not work for me. How did you manage to sort nodes on particular level of hierarchy?
Hello @Thomaash :) I am facing the very same problem, was looking in other places for some hints but still nothing to be found :thinking: Any update on how vis-network can generate reasonable hierarchical layout (proper tree), without multiple edges crossing?
Maybe some hints of what should be implemented and where? It is a blocker for me currently, maybe I will be able to help somehow to implement this.
Cheers, Krzysiek
Hi @liosedhel,
the most relevant parts are in https://github.com/visjs/vis-network/blob/master/lib/network/modules/LayoutEngine.js, https://github.com/visjs/vis-network/tree/master/lib/network/modules/layout-engine and https://github.com/visjs/vis-network/blob/master/lib/network/modules/components/DirectionStrategy.js. Basically the task is to make sure the x position (or y if it's horizontal) is chosen in such a way that there are no (or as little as possible) crossing edges.
Thanks for any help.
Hi!
I fill the tree from the bottom and add nodes and enges from left to right. Here is my project for building my family tree. Maybe my advice will help. The project is in Russian.
https://xn--b1add1bh.xn--b1afoeyr1d.xn--p1ai/
Good luck!
@AlekseyKurilev, What you've done is the most beautiful family "tree" I have seen. It is honestly worth spinning out as a standalone project with the necessary data format to be used with. I'd definitely use it. I just checked all available OSS genealogy software out there and everything is ugly and hardly usable.
What does it mean when people are connected with a line and a number on top of it? Do you think it will be possible to add additional connections types like adoptive parents?
One suggestion - to color mother relationship with pink and father with blue or green, just different colors, doesn't matter which exactly. Presently line crossings are visually confusing.
P.S. I understand the main logic is implemented in https://древо.курылев.рф/tree.js
@AlekseyKurilev, What you've done is the most beautiful family "tree" I have seen.
@akostadinov Thanks!
It is honestly worth spinning out as a standalone project with the necessary data format to be used with. I'd definitely use it. I >just checked all available OSS genealogy software out there and everything is ugly and hardly usable.
I also could not find a beautiful ready-made solution and decided to make my own :) You can use my code freely. I'm not a professional programmer, just an IT guy.
What does it mean when people are connected with a line and a number on top of it?
This means that there are children in this family and their number is indicated above the line. If you click on the line area, a tree will open relative to this family
Do you think it will be possible to add additional connections types like adoptive parents?
At the moment, I have not solved 2 problems: adoption of children several marriages. It is not clear how to display such cases: top, bottom, sideways? I have not seen a good graphical solution to this problem in other systems.
One suggestion - to color mother relationship with pink and father with blue or green, just different colors, doesn't matter which exactly. Presently line crossings are visually confusing.
Initially, we wanted to use the standard genealogy colors to determine gender. But then we decided that it would be like a tree, the leaves are green, the men are darker, the women are lighter. The colors can be easily corrected.
P.S. I understand the main logic is implemented in https://древо.курылев.рф/tree.js
Yes.
I wanted to create a library that would work with the standard genealogy format gedcom. And almost all the data on my site is loaded from gedcom saved from the program https://gramps-project.org/blog/. But
- in other projects, the gedcom format is different and it will not be possible to make a universal system.
- gedcom does not contain some of the information needed for the site, such as the area for the person's face in the photo. I upload this data to the site from Gramps XML.
If I undertook to redo everything again :), I would place the database from Gramps in MySQL on the site, enter the data through a program on the computer, and on the site take the information directly from MySQL.
If you decide to develop the project - write, I am ready to share my experience. I have a lot of ideas on how to improve the project, but unfortunately I do not have enough knowledge and experience in programming. And time to do it all alone :(
Please note that clicking on a photo opens the gallery in which people's faces are highlighted, and on the main page in the upper-right corner of the tree, a link appears that builds a tree relative to the selected person. I have collected information about 420 relatives.
Good luck!
I'm just leaving an idea here... I wonder if the problem is because there are too many people per "level" which forces nodes apart horizontally. Here's my idea: we could use birth-years as levels to ensure hierarchy is maintained and provide some more breeathing room to each "layer". Now I doubt you'll need 2021 levels, so we could normalize them to your range. So if your first person was born in 1900 and your last person was born in 2000, then you would have 100 levels, and each node would get a level 1:100 corresponding to their normalized birth-year.
Would this help?
