Вопрос или проблема
Я ищу гибкий способ отображения данных, основанных на модели GEDCOM или модели Gramps, которые являются наиболее распространенными моделями данных для генеалогии. Обе модели поддерживают родовые деревья, включающие как биологических родителей, так и множественные межродственные связи между различными ветвями родословной.
Один пример множества межродственных связей — это случай, когда две сестры одной нуклеарной семьи выходят замуж за двух братьев другой нуклеарной семьи. Это случай с моим дальним родственником где-то в 17-м веке, как видно на скриншотах (моего семейного древа на MyHeritage.com) ниже.
С точки зрения братьев:
С точки зрения сестер:
Более сложный пример — это когда прабабушка мужчины является тещей бабушки его жены (или ее сестры). Что-то подобное также происходит среди моих предков 18-го века, но с этим немного сложнее предоставить подходящий скриншот.
Хотя я знаю, что это можно сделать с помощью Canvas, я предпочитаю решение, использующее либо SVG, либо HTML для отображения. Существуют ли JS-библиотеки, поддерживающие такие множественные межродственные связи между различными ветвями одного древа из коробки? Или вы знаете примеры, например, для D3.js, jsPlumb или GoJS, которые поддерживают как (1) связку с двумя родителями, так и (2) множественные межродственные связи из коробки? И если нет, какой подход вы бы порекомендовали?
Существует бесплатный инструмент, который позволит вам это сделать: SVG Family-Tree Generator (6.0). Он не только позволит вам графически спроектировать и разметить дерево, которое он преобразует в комбинацию SVG, HTML, CSS и JavaScript, но и импортирует данные из GEDCOM. Более того, имеется возможность настроек для взаимодействия — будь то с встроенной функцией клика или пользовательской. В статье упоминаются комплект установки, примеры и документация. Я на самом деле автор и хотел инструмент, который сделал бы то, что вы описали, чтобы делиться своими деревьями с семьей и друзьями без необходимости подписки.
Я только что опубликовал свое решение https://github.com/ameros/gedcom-svg-tree, поэтому, пожалуйста, посмотрите его
.
Ответ или решение
Создание и отображение семейного дерева с использованием HTML, SVG и CSS представляет собой сложную задачу, особенно если требуется визуализировать сложные связи между родственниками, как описано в модели данных GEDCOM или Gramps. Рассмотрим теорию, примеры и применение в данном контексте.
Теория: Почему выбирать SVG и CSS для семейного дерева?
SVG (Scalable Vector Graphics) – это мощный инструмент для создания всех видов графики, включая сложные схемы и диаграммы, такие как семейные деревья. SVG подходит для таких задач по нескольким причинам:
-
Масштабируемость: SVG-графика остается четкой и качественной независимо от масштаба, что важно для отображения крупных деревьев с возможностью увеличения и уменьшения.
-
Гибкость: SVG позволяет использовать стили CSS для оформления, что дает возможность легко изменять внешний вид элементов дерева.
-
Интерактивность: SVG поддерживает JavaScript, что упрощает добавление интерактивности, такую как раскрытие узлов или отображение дополнительной информации при наведении.
-
Совместимость: SVG является общепринятым стандартом и поддерживается почти всеми современными веб-браузерами, что повышает надежность и доступность ваших диаграмм.
Примеры: Использование SVG-систем для визуализации сложных родословных
D3.js
D3.js – мощная JavaScript-библиотека для манипуляции документом на основе данных. Она отлично подходит для создания динамических, интерактивных графиков и диаграмм, включая семейные деревья. D3.js позволяет:
- Отображать элементы SVG и управлять ими.
- Обрабатывать сложные JSON-структуры, которые могут быть извлечены из данных GEDCOM.
- Разрабатывать сложные визуализации с анимацией и интерактивностью.
Пример использования D3.js для создания дерева может включать этапы, такие как загрузка данных, обработка структуры дерева и применение стилей через CSS для узлов и связей.
jsPlumb и GoJS
Эти библиотеки также используются для построения схем и диаграмм. Они поддерживают обработку сложных диаграмм с многочисленными связями, что полезно для отображения родословных с множественными пересечениями ветвей.
- jsPlumb: Поддерживает создание связей между элементами HTML и SVG и предоставляет средства для визуализации сложных узловых диаграмм.
- GoJS: Предоставляет обширный набор инструментов для построения настраиваемых диаграмм с интерактивностью и позволяет легко изображать семейные структуры с сложной иерархией.
Применение: Как можно реализовать это на практике?
Для создания собственного семейного дерева с использованием SVG и CSS, начинайте с выбора подходящей библиотеки. Если ваша задача включает работу с данными GEDCOM и необходимость обработки сложных родственных связей, подумайте о следующих шагах:
-
Импорт данных: Используйте существующие решения или создайте собственный парсер для извлечения данных из формата GEDCOM или Gramps.
-
Создание структуры дерева: На основе полученных данных создайте объектную структуру JavaScript, отражающую родственные связи.
-
Рендеринг узлов: Используя D3.js, создайте узлы SVG для каждого члена семьи. При необходимости добавьте атрибуты CSS для стилизации узлов.
-
Отрисовка связей: Добавьте линии и стрелки между узлами, чтобы показать родственные отношения, используя возможности D3.js или других библиотек.
-
Интерактивность: Внедрите функции для взаимодействия с пользователем – например, увеличить узел по щелчку или отобразить дополнительную информацию.
-
Управление отображением: Удобство навигации и реорганизация узлов для упрощенного просмотра огромного дерева – важная часть. Используйте возможности CSS и JavaScript для реализации этого.
Завершение
Генерация семейного дерева с использованием HTML, SVG и CSS – это не только техническая задача, но и уникальная возможность визуально представить сложные родственные связи. Использование современных библиотек и технологий позволяет эффективно обрабатывать и визуализировать большие объемы данных. Ознакомление с существующими решениями, обмен опытом и эксперименты с новыми подходами помогут в достижении истинной гибкости и интерактивности ваших решений.
В заключении, каждое родословное дерево уникально, и его создание должно быть продуманным, чтобы обеспечить легкость навигации и точность данных, что делает такие инструменты более доступными для друзей и семьи без необходимости в специализированной подписке или программных комплексах.