Как вы создаете генеалогическое древо в d3.js?

В настоящее время я работаю над небольшим экспериментом генеалогии и хотел бы реализовать простое семейное древо, как на картинке ниже.

Лучшие результаты поиска до сих пор для этого приводили только примеры, когда у ребенка может быть только родительский node. Но мне нужна возможность создавать связи между сущностями (от отца к матери) и связями между узлами и другими ссылками (от ребенка к ссылке "отец-мать" ). В настоящее время у меня нет фиксированной схемы данных для этого.

Я выбрал d3.js для этого потому что он выглядит будет способен выполнять работу. Я просто не знаю, как и где начать. Учебники о d3.js охватывают только стандартные диаграммы, такие как гистограммы.

Надеюсь, кто-то может мне помочь.

This is how the result should look like

ОТВЕТЫ

Ответ 1

Мой подход:

Давайте рассмотрим пример, который вы проиллюстрировали на прилагаемом рисунке:

Jenny Of Oldstones также является ребенком Aegon V, но разница между этим ребенком и другими детьми Aegon V заключается в том, что в этом случае я не рисую связь между ним.

Это делается установкой node как no_parent: true в node JSON Пример:

//Here Q will not have a parent
 {
            name: "Q",
            id: 16,
            no_parent: true
 }

В коде проверьте _elbow function_, это выполняет задание не рисовать линию между ней и ее родителем:

if (d.target.no_parent) {
    return "M0,0L0,0";
}

Следующий сценарий - это ссылка, идущая между node Aerys II и Rahella, этот node имеет свой набор дочерних элементов.

  • Я создал node между ними, который помечен как hidden: true,
  • Я делаю display:none для такого node. Похоже, что дети идут от линии между node Aerys II и Rahella

Пример JSON:

//this node will not be displayed
{ name: "",
    id: 2,
    no_parent: true,
    hidden: true,
    children: [....]

    }

В коде проверьте место, где я делаю прямоугольники, код ниже скрывает node:

    .attr("display", function (d) {
    if (d.hidden) {
        return "none"
    } else {
        return ""
    };
})

Полный код находится здесь: http://jsfiddle.net/cyril123/0vbtvoon/22/

В приведенном выше примере я использовал имена node A/B/C... но вы можете изменить его в соответствии с вашими требованиями. Вам нужно будет центрировать текст.

Я добавил комментарии к коду, чтобы помочь вам понять поток. На всякий случай, когда вы не поняли, пожалуйста, прокомментируйте, что я буду рад прояснить.

Ответ 2

dTree - это библиотека с открытым исходным кодом, встроенная в верхнюю часть D3, которая создает семейные деревья (или аналогичные иерархические графики).

Он обрабатывает назойливые части генерации графика D3 вручную и использует простой формат данных json:

[{
  name: "Father",
  marriages: [{
    spouse: {
      name: "Mother",
    },
    children: [{
      name: "Child",
    }]
  }]
}]

Если вы заинтересованы в его модификации, он поддерживает обратный вызов для node рендеринга и обработчика событий. Наконец, библиотека находится на стадии разработки в 2016 году, и приветствуются запросы на загрузку.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я автор dTree. Я создал библиотеку после поиска в Интернете так же, как вы, и не нашел ничего по своему вкусу.

Ответ 3

Неблагоприятная новость: Проведенное мной исследование показывает, что нет готовой библиотеки d3, которая непосредственно выполняет это без какой-либо настройки.

Хорошие новости: Были и другие люди, которые изучили это и нашли отличные отправные точки! Я понимаю, что это не полное решение всей задачи под рукой, но, похоже, из вашего вопроса, что большая часть ваших трудностей до сих пор заключалась в том, чтобы просто выяснить, с чего начать (например, "Учебники о d3.js охватывают только стандартные таких как гистограммы." ). В отсутствие чего-нибудь лучшего, я, по крайней мере, отвечу на эту часть здесь.

Во-первых, в ответ на этот связанный postoffflow post с нескольких лет назад, inanutshellus предоставляет отличные инструменты d3, которые доступны и могут быть полезны здесь. С некоторой легкой настройкой/расширением они должны быть в состоянии заставить вас, где вы собираетесь относительно быстро. Для потомков ответ inanutschellus воспроизводится здесь:

Есть несколько вариантов, но я считаю, что для каждого из них потребуется немного Работа. Это помогло бы, если бы был один стандарт для представления генеалогическое древо в JSON. Недавно я заметил, что geni.com имеет довольно для этого необходим подробный API. Возможно, кодирование против их API будет хорошая идея для повторного использования...

- Родословное дерево -

Родословное деревоможет быть достаточно для ваших нужд. Вы сделали бы законную связь, где, если вы нажмете на свое имя, график будет перерисовываться, чтобы вы могли см. их происхождение.

- Дерево компоновки скобок -

Подобно родовому дереву, но двунаправленному, это Дерево компоновки скобокпозволяет вам обращаться с "здесь мои родители, дедушки и бабушки, дети, внуков". Как и родословное дерево, вы должны сделать индивидуумов, связанных с повторным центром скобки на node.

- Макет, основанный на силе -

Есть несколько интересных силовых макетов, которые кажутся многообещающими. Взгляните на этот пример силовой макет с интеллектуальными метками. Корректировка алгоритм определения "силы" может сделать это очень прекрасное дерево, с более старыми поколениями выше или ниже новых.

- Кластерная дендрограмма (почему она не работает) -

Планы d3.js, которые я видел, лучше всего подходят для семьи деревья предполагают, что один node является родителем, тогда как вам нужно представляют родителя как комбинацию (визуально "Т" между) два узла: один node, который является членом вашего дерева, и один плавающий node, который представляет зятья. Настройка дендрограммы кластера это должно быть осуществимо, но не без существенных изменений.

Если вы - или кто-то другой - решайте это, дайте мне знать. Я бы как видеть (и извлекать выгоду) от работы и может вносить свой вклад к нему, если это возможно.

С точки зрения конкретной реализации, mj8591 задал этот вопрос относительно подобного генеалогического древа с другой проблемой. Тем не менее, к счастью для вас этот вопрос включает скрипку (весь код js), которая содержит большинство или все необходимые вам компоненты, а ответ от mdml включает еще одну скрипту, которая добавляет еще более гранулированную "кликабельность" к каждому node.

Опять же, это ничего автоматизированного, но, надеюсь, этих ресурсов достаточно, чтобы вы отлично начали!

Ответ 4

Я знаю, что этот вопрос довольно старый, но если кому-то все еще интересно, посмотрите мой образец здесь.

Ответ 5

Я попробовал dtree и понравился. Однако, когда вы добавляете несколько поколений, горизонтальный дисплей может сделать общий дисплей очень большим и громоздким. Вместо этого я использовал Reingold-Tilford Tree. Один из недостатков этого дерева состоит в том, что каждый node может иметь только одного родителя: супруги не могут отображаться рядом друг с другом: чтобы преодолеть это ограничение, я подкрепил JSON, чтобы объединить супругов в одну сущность (например: "муж - жена" ) просто перед отправкой его в дерево.

Ответ 7

Я не знаю, поможет ли это вам, потому что вы сказали, что собираетесь использовать d3.js, но есть еще один инструмент, который вы можете изучить в использовании jsplumb. Это идеальный вариант для такого проекта: главная страница. У них также есть несколько достойных учебников. Существует еще один, например docs, и еще один интерактивный.

Как я уже сказал, если не слишком поздно переключаться на технологии, это, возможно, стоит попробовать. Все html, css и javascript, поэтому это не должно быть суровым переходом.