Как показать браки в "генеалогическом древе" на основе d3.js?

Question

Я - разработчик HTML/CSS, исследую javascript-решения для построения "семейного древа", которое должно показывать браки (вне семьи, конечно) осмысленно.

По сути, я смотрю на это на основе дендрограммы, основанной на d3.js, например, http://bl.ocks.org/4063570, но я изо всех сил пытался найти там что-нибудь, что выражало бы "браки".

Ниже приведено изображение данных, на которых я буду основываться:

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

Answer 1

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

- Родословная -

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

Дерево кронштейнов

Подобно Родословному дереву, но двунаправленному, это дерево макетов скобок позволяет работать с представлением типа "здесь мои родители, дедушки, бабушки, дети, внуки". Как и в родословной, вы можете сделать так, чтобы отдельные лица могли перецентрировать скобку на этом узле.

- Формирование на основе силы -

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

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

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

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

Answer 2

Мне также нужно было нарисовать родословные с D3, поэтому я понял, как. Я создал примеры, которые показывают основные функциональные возможности, а затем добавляют расширенные функции, такие как расширение и отображение потомков.

Я не знаю, как вы хотите показывать браки. Браки являются неотъемлемой частью родословной родословной, но не являются наследственными. Код может быть адаптирован для отображения супругов в узлах-потомках.

Вот фотография того, как это выглядит. Стиль может быть изменен по желанию.

Answer 3

Это требует некоторой работы, но, по сути, идея, которую я предлагаю, состоит в том, чтобы создать расклад сил с помощью особого вида узла, называемого отношениями, которые не рисуют круг. Он представляет связь между двумя субъектами и может быть родительским для большего количества узлов.

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

{
  "nodes": [
    {
      "type": "root",
      "x": 300,
      "y": 300,
      "fixed": true
    },
    {
      "type": "male",
      "name": "grandpa"
    },
    {
      "type": "female",
      "name": "grandma"
    },
    {
      "type": "relationship"
    },
    {
      "type": "male",
      "name": "dad"
    },
    {
      "type": "female",
      "name": "mum"
    },
    {
      "type": "relationship"
    },
    {
      "type": "male",
      "name": "I"
    }
  ],
  "links": [
    {
      "source": 0,
      "target": 2
    },
    {
      "source": 1,
      "target": 2
    },
    {
      "source": 0,
      "target": 3
    },
    {
      "source": 3,
      "target": 4
    },
    {
      "source": 4,
      "target": 6
    },
    {
      "source": 5,
      "target": 6
    },
    {
      "source": 6,
      "target": 7
    }
  ]
}

Надеюсь, я прояснил кое-что о возможностях d3.