Как рисовать линии генеалогического дерева с помощью HTML CSS?

Я пытаюсь реализовать что-то похожее на http://www.ancestry.com, но я не уверен, как рисовать линии.

Вот грубый аскейский эскиз того, что я хочу сделать:

                 +----GrDAD1
                 |
     +----DAD----+
     |           +----GrMOM1
ME --+
     |           +----GrDAD2
     +----MOM----+
                 |
                 +----GrMOM2

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

ОТВЕТЫ

Ответ 1

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

Лично я бы выбрал Canvas с наложением карты изображения или, возможно, с Flash. Создание графического макета с использованием только div или таблиц может быстро выйти из-под контроля и создать огромный и уродливый код. Хотя это вопрос мнения.:)

Вы можете использовать холст для визуализации строк, а затем абсолютно позиционировать divs с текстом для каждого node. Или вы можете сделать все это в холсте (в этот момент вам понадобится наложение карты изображения, если вы хотите, чтобы отображаемое дерево было интерактивным.)

Ответ 3

Я отправлю еще один ответ, хотя ответы на все вышеперечисленное находятся в шаге.

Предположим, вы хотите работать со всеми браузерами. Если вам нужно работать в Internet Explorer, и вы создаете собственное Canvas-решение, вы можете включить ExplorerCanvas.

Семейные деревья - это, по сути, бинарные деревья. Я знаю, что реальная жизнь сложна с усыновлениями, разводами, тьфу, но пусть на секунду предположим, что они бинарны в одном направлении (предки) от конкретного человека.

Хороший инструмент, который использует Canvas, имеет мост для работы с IE, и использует простой и общий формат данных, это JavaScript InfoVis Toolkit.

Проверьте образец на: http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html

Это может быть не совсем то, что вы хотите из коробки, но вы можете настроить внешний вид.

Полезная нагрузка для плагина очень проста, и ваш пример будет выглядеть примерно так:

var tree = {
  id: "ME",   // Needs to be internally unique 
  name: "ME", // Visual label, does not need to match id 
  data: {},   // not really used here, but parameter needed
  children: [
    {id: "DAD", 
    name: "DAD", 
    data: {},
    children: [
      {id: "GrDAD1", 
      name: "GrDAD1", 
      data: {},
      children: []},
      {id: "GrMOM1", 
      name: "GrMOM1", 
      data: {},
      children: []},          
    ]},
    {id: "MOM", 
    name: "MOM", 
    data: {},
    children: [
      {id: "GrDAD2", 
      name: "GrDAD2", 
      data: {},
      children: []},
      {id: "GrMOM2", 
      name: "GrMOM2", 
      data: {},
      children: []},          
    ]}
  ]
};

Я уверен, что есть другие решения, и я надеюсь, что вы найдете тот, который работает для вас.

Ответ 5

Мне нравится SlickMap CSS для этого.

Так как это сделано для sitemaps, оно стилирует вложенные списки ссылок, но тривиально изменять его, чтобы обрабатывать больше, чем ссылки в каждой ячейке, например, я здесь: http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html

Ответ 6

Один из вариантов - использовать абсолютное позиционирование и несколько изображений. Вам понадобится горизонтальная линия и изображение вертикальной линии. Затем используйте позиционирование для позиционирования элементов с соответствующими строками.

Ответ 7

Примеры, которые я видел до сих пор, используют флеш для подобных вещей. http://academia.edu, например.

В противном случае я, вероятно, использовал бы абсолютно позиционированные DIVs для составления строк, что потребует сложных вычислений:)

Третий вариант - если вы хотите использовать больше javascript и жертвуете некоторой совместимостью с браузером, используйте SVG-элемент. Вы можете проверить эту библиотеку: http://raphaeljs.com/ Там есть хорошая древовидная демонстрация, которую вы можете найти полезной (http://raphaeljs.com/graffle.html).