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

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

вот примерный эскиз ascii того, что я хочу сделать:

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

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

14
css family-tree html javascript

9 ответов

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

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

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

6

вы можете сделать это с помощью чистого css. Вот пример :

http://thecodeplayer.com/walkthrough/css3-family-tree

26

Я брошу еще один ответ, хотя ответы выше все на стадионе.

предположим, вы хотите работать во всех браузерах. Если вам нужно работать в 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: []},          
    ]}
  ]
};

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

10

google имеет контроль для этого

http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

7

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

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

4

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

2

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

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

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

1

Я думаю, используя холст.

посмотреть.. может быть, это дает какую-то идею рисование графики с холстом

1

вы можете использовать jsPlumb, что довольно хорошо для такого рода вещей http://jsplumbtoolkit.com/demo/chart/mootools.html

0