Постановка задачи:
построить визуальное представление родового дерева на странице .html (или любой другой, поддерживаемой браузером, не суть).
Тип исходных данных:
в БД хранятся записи о персонах. Каждая персона располагает собственным набором информации (такие как: фото персоны, дата рождения, имя, дата смерти если уже случилось, описание характера личности и т.п.), содержит ссылки на двух родителей, содержит ссылки на заключенные и, если случилось, расторгнутые браки с иными персонами.
Проект на серверной стороне реализован на c# (ASP.NET). Если кому поможет в понимании с какой стороны подойти к реализации задачи, то во тчто мы имеем:
List<People> peoples - массив людей, входящих в родовое дерево может содержать от 1 до 1000 человек.
Само описание типа People:
namespace Classes
{
public class People
{
#region Основные данные
/// <summary>
/// Идентификатор персоны
/// </summary>
public int Id { get; set; }
/// <summary>
/// Имя персоны
/// </summary>
public string Name { get; set; }
/// <summary>
/// Дата рождения персоны
/// </summary>
public DateTime BirthDay { get; set; }
/// <summary>
/// Дата смерти персоны (если еще жива, то значение минимальное)
/// </summary>
public DateTime DeathDay { get; set; }
/// <summary>
/// Возраст
/// </summary>
public int Age { get; set; }
/// <summary>
/// Идентификатор отца
/// </summary>
public int Parent1_Id { get; set; }
/// <summary>
/// Идентификатор матери
/// </summary>
public int Parent2_Id { get; set; }
/// <summary>
/// Первый родитель (отец)
/// </summary>
public People Parent1 { get; set; }
/// <summary>
/// Второй родитель (мать)
/// </summary>
public People Parent2 { get; set; }
/// <summary>
/// История рождения
/// </summary>
public string BirthDayHistory { get; set; }
/// <summary>
/// Обстоятельства смерти
/// </summary>
public string DeathDayHistory { get; set; }
#endregion
#region дополнительные заметки, особые даты
/// <summary>
/// Дополнительные заметки
/// </summary>
public string Common { get; set; }
/// <summary>
/// Особые даты и события: [дата1][описание1]|[дата2][описание2]
/// </summary>
public string Specials { get; set; }
#endregion
/// <summary>
/// Идентификатор аккаунта в системе
/// </summary>
public int UserId { get; set; }
public List<Classes.Vedding> Veddings { get; set; }
public People()
{
}
}
}
Само описание типа Vedding:
namespace Classes
{
public class Vedding
{
/// <summary>
/// Идентификатор в системе
/// </summary>
public int Id { get; set; }
/// <summary>
/// Идентификатор партнера 1 в системе
/// </summary>
public int Name1_Id { get; set; }
/// <summary>
/// Идентификатор партнера 2 в системе
/// </summary>
public int Name2_Id { get; set; }
/// <summary>
/// Дата росписи
/// </summary>
public DateTime VeddingDate { get; set; }
/// <summary>
/// История бракосочетания
/// </summary>
public string VeddingHistory { get; set; }
/// <summary>
/// История развода
/// </summary>
public string DivorcedHistory { get; set; }
/// <summary>
/// Дата развода
/// </summary>
public DateTime DivorceDate { get; set; }
public Vedding()
{
}
}
}
Особенности задачи:
особенность дерева состоит в том, что оно предусмотрено для отображения не только вертикальных ветвей от основной персоны и через родителей, родителей родителей и дальше пра-пра, но и для отображения паралельных веток братьев и сестер на каждом колене (братья и сестры, в том числе сводные, у главной персоны, у родителей, у прародителей и т.д.). Таким образом, дерево не только вертикально ориентировано, но и горизонтально на различное удаление от центра по горизонтали.
К примеру, в дереве могут присутствовать тети и дяди, а также двоюродные дедушки и бабушки с их потомками, двоюродные братья и сестры.
Думаю, суть ясна.
В приложениях несколько графических файлов, поясняющих примерный вид задуманного.
Возможно для исполнителя станет полезным библиотеки для клиентской реализации:
https://almende.github.io/vis/network_examples.html
https://almende.github.io/vis/examples/network/nodeStyles/imagesWithBorders.html (на примере интерактивных элементов, способных к перемещению мышкой).
Что ожидается от исполнителя:
- предоставить полную реализацию сего на странице .html;
- предоставить требования в каком виде следует поставить пакет данных на страницу .html;
- реализовать задачу так, что бы в будущем возможно было без проблем добавить/удалить новые пункты данных без поломки всей системы.
Дополнительно:
можно активировать один элемент и должно быть выделены все нисходящие родовые ветки, а справа во фрейме должно вывестись вся информация по персоне.
Наши уточнения по проекту и Ваша стоимость работ - в личной переписке.
