Dubreuilh Thierry
Dubreuilh Thierry
1
Male
1
Connector annotation
Selected

No user actions yet.

User guided family chart nodes ordering

Family Tree Component orders and aligns nodes automatically, it searches for the best order of family nodes. This is very handy for initial rendering, but lack of ordering rules keeps layout engine reordering nodes every time we add new nodes into diagram. So end users have to adopt to global layout changes every time they make changes to diagram nodes. The opposite situation when user defines position for every node drives us back to the age of diagram editors and manual nodes placement. This is inconvinient, so we combine the best of two approaches: autolayout and user guided nodes order. Our layout engine follows end user ordering rules as long as they are applicable and ignores them when they are not relevant.

This demo diagram displays relations guiding layout engine in form of horizontal red dotted lines. The arrow direction defines who gets its order position first and who is next.

Additionally this demo shows offbeat connector annotation between any 2 nodes of diagram and background annotation for all user seleted nodes in it.

Family diagram layout rules:

  • Female nodes are placed on the right side of male nodes.
  • Children are placed from left to right by age.
  • Male second marriages are placed to the left of the node.
  • Female second marriages are placed to the right of the node.

Family Diagram Specific

Group by option defines node placement in layout close to its parents or children when node is linked across multiple levels in hierarchy. See "alignment" data set.

The following option keeps items at the same levels after connections bundling.

The following option hides direct connectors to grand parents. It helps reduce diagrams connectors layout complexity. This option should be used together with dynamic highlighting of connectors to grandparents via immidiate parents, so information is not lost.

The following option enables natrix layout in family diagram. Nodes having the same set of parents and children are grouped into square shaped matrix in order to keep them visualy together.

Have questions? Ask for help on Github.