rstacruz / kingraph Goto Github PK
View Code? Open in Web Editor NEWPlots family trees using JavaScript and Graphviz
Plots family trees using JavaScript and Graphviz
When using both parents and parents2 within the same family - I end up with some weirdly interspersed relationships where current spouse (parents) and ex-spouse (parents2) with children are put very far apart from each other, which makes the whole graph more confusing:
I'd like it if all partners in 'parent' relationships were clustered as near to the central node as possible amongst other siblings. I've noticed that be reordering parent vs parent2 entries in my yml file changes this, but right now it's very trial and error. I'm not sure how to fix this (I'm concerned it's buried deep in the viz.js file), so if anyone has ideas I'm happy to help push on it.
Hi, I'm getting this error when working with a large family:
kingraph genealogy.yml > genealogy.svg
Error:
add_segment: error
add_segment: error
add_segment: error
add_segment: error
add_segment: error
add_segment: error
add_segment: error
failed at node 7167[0]
Assertion failed: np->cells[0], at: maze.c,313,chkSgraph at Error
at jsStackTrace (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:5:20800)
at stackTrace (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:5:20983)
at ___assert_fail (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:5:603049)
at PU (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:17:39811)
at LU (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:17:34738)
at Array.HU (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:17:28119)
at Object.y5 [as dynCall_iii] (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:21:32521)
at invoke_iii (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:5:632212)
at yP (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:10:66616)
at Mf (C:\Users\Tim\AppData\Roaming\npm\node_modules\kingraph\node_modules\viz.js\viz.js:11:132553)
I raised the Memory for viz.js as suggested by @momack2 in this other issue but it doesn't seem to help.
It seems to have to do with the family size among one house. This error occurs when it has more than 24 parent/children pairs.
Any idea what is going awry there?
The schema examples show born
and died
as valid properties for a person. When I added values to people in my tree I expected them to appear in the rendered tree, but they did not.
I had a poke around and it looks like these values are not included in any templates.
I am making my family tree, and kingraph
is a great tool for the job. I am having some problems with Duplicate names though: Both my father and I share the First name, so I end married to my mother, which is weird :)
Is there a way to resolve this without resorting to using my middle name? This also an problem in that YAML will not allow names with spaces (I think). For instance:
people:
Antonio Miguel:
name: Antonio Miguel
fullname: Antonio Miguel de Jesus Domingues
gender: m
Cheers.
Hi, loving your project! But I've encountered this specific problem. For example below, Bill is the eldest but he is put below the youngest sibling Ginny, because he has family. Is there a fix for this?
families:
- parents: [Arthur, Molly]
children: [Ginny, Ron, George, Fred, George, Percy, Charlie, Bill]
families:
- parents: [Bill, Fleur]
children: [Victoire, Dominique, Louis]
- parents: [George, Angelina]
- parents: [Ron, Hermione]
children: [Rose, Hugo]
An inelegant solution I did was to make the single sibling a parent
but that's not what it's supposed to do.
At the moment, as far as I can tell, the way to get around duplicate names is to give a unique id e.g. 'name2' and then modify the name field in the people obj
people:
#duplicates
Henry2:
name: Henry
William2:
name: William
The only problem with this in the below code if person.name && !person.fullname you end up with the name written twice:
Lines 76 to 86 in ac6c8da
The solution I came up with is the following:
if (person.fullname) { // only make a second line when there is a fullname
label =
'<<table align="center" border="0" cellpadding="0" cellspacing="2" width="4">' +
'<tr><td align="center">' +
`${person.name || id}</td></tr>` +
'<tr><td align="center">' +
'<font point-size="10" color="#aaaaaa">' +
`${person.fullname}</font></td></tr></table>>` // put the fullname in the second line
} else {
label = person.name || id // if there is a name use that otherwise use id
}
Really loving this project btw
thanks
It looks like this project is dead but it's continued by @AlexanderWillner
https://github.com/AlexanderWillner/kingraph
For printing, using tiny light-gray text for sub labels doesn't work well, but the configurable "styles" class currently only supports styling the title/box. You can manually change the font-point and color of the label on line 82 of render_graph.js (in the "renderPerson" function) to make these changes manually.
TODO: integrate this support into the styles function to allow passing these variables ('labelfontcolor', 'labelfontsize', etc) via classes.
is there any way to use kingraph on the client side to generate and show the generated svg in the browser of the user
i wanted to add image attribute to insert image of the person can anyone tell me how can we do that or its not yet implemented in this plugin
Hello,
When I go for a large family (which works in smaller chunks) I have the following error
When I run the following
kingraph myfamily_all.yml -F png > myfamily_all.png
I get the following result.
Cannot enlarge memory arrays. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 16777216, (2) compile with -s ALLOW_MEMORY_GROWTH=1 which adjusts the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or if you want malloc to return NULL (0) instead of this abort, compile with -s ABORTING_MALLOC=0
abort("Cannot enlarge memory arrays. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 16777216, (2) compile with -s ALLOW_MEMORY_GROWTH=1 which adjusts the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or if you want malloc to return NULL (0) instead of this abort, compile with -s ABORTING_MALLOC=0 ") at Error
at jsStackTrace (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:5:20800)
at stackTrace (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:5:20983)
at abort (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:28:5424)
at abortOnCannotGrowMemory (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:5:21343)
at enlargeMemory (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:5:21788)
at Function.dynamicAlloc [as alloc] (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:5:6269)
at _sbrk (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:5:602676)
at N4 (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:21:7406)
at cK (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:13:185312)
at bK (/usr/local/lib/node_modules/kingraph/node_modules/viz.js/viz.js:13:185061)
If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information.
Adding options (1), (2) or (3) has no effect. The family isn't that big - around 200 lines and 400-500 people in 10 houses.
Any advice appreciated.
Mac OS 10.13.3
Parents with one children is always align like this :
P1 ---- C1
P2--|
But as I want to make a big descendant tree (each couple shows one child, not the siblings), BUT as the child is align with its father it's not very nice at I'd like a centered version,
P1--|
C1
P2--|
Is kingraph responsible of this ? or it is a dependency and we can do nothing ?
I'm not really terribly familiar with graphviz, practically speaking, but even in your own examples, the penstyle: dashed
doesn't do anything (from the Potterverse example). (is that even a valid setting)? Anyway, I tried a few others, shape: hexagon
, style: dashed
, dir: both
etc. all were ignored. I didn't look at the source to see why, however.
Please make it possible to add adoptions.
Hello!
I would like to add the round corners for the HTML table
element or SVG polygon
element. I made a small test on a YAML file and it did not work:
styles:
global:
fillcolor: "#CCCCCC"
strokeWidth: 4
strokeLineCap: round
strokeLineJoin: round
male:
color: "#2E3482"
fillcolor: "#E1E1FF"
female:
color: "#E20042"
fillcolor: "#FEF2F6"
The HTML table
element does not have depreciated attributes similar to border-radius
. The SVG polygon
element has attributes, but they are not similar to border-radius
because if you add the zero for the stroke-width
attribute even if with stroke-linecap
and stroke-linejoin
attributes with the value round
, you will not see the round corners. The addition of style
for both these elements will not work either.
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.