Я создаю интерактивный создатель генеалогического древа, в отличие от более простых версий, которые представляют собой простые схемы / деревья родословных.
Требования к моему (на основе familyecho.com):
- несколько партнеров против просто двух родителей на одного ребенка, которых вы обычно видите.
- несколько братьев и сестер
- партнерам необязательно иметь детей
- не всегда обязательно должна быть родительская "пара", может быть только отец / мать-одиночка
Проблема, с которой я столкнулся: я генерирую смещения на основе «текущего» узла / члена семьи, и когда я прохожу мимо первого поколения, скажем, с двумя родителями, они перекрываются.
Пример перекрытия и изображения партнера не на одной оси X:
Вот актуальное приложение и main js file, где у меня возникла проблема. А вот созданный мной упрощенный jsfiddle, демонстрирующий проблему родительского / смещения, хотя мне действительно нужно решить перекрытие для этого в целом, в дополнение к тому, чтобы убедиться, что партнеры нарисованы на той же оси x, что и другие партнеры.
Как я могу решить этот и возможные в будущем конфликты, которые накладываются друг на друга? Нужна ли мне какая-то функция перерисовки, которая обнаруживает коллизии и корректирует смещения каждого блока при обнаружении ? Я пытаюсь сделать его бесшовным, поэтому выполняется ограниченное количество перерисовок.
Пример вычисления смещения относительно «контекста» или текущего узла:
var offset = getCurrentNodeOffset();
if ( relationship == RELATIONSHIPS.PARTNER ) {
var t = offset.top; // same level
var l = offset.left + ( blockWidth + 25 );
} else {
var t = offset.top - (blockHeight + 123 ); // higher
var l = offset.left - ( blockWidth - 25 );
}