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

StackOverflow https://stackoverflow.com/questions/1695115

Вопрос

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

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

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

Я приведу еще один ответ, хотя все приведенные выше ответы соответствуют действительности.

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

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

Хорошим инструментом, использующим Canvas, включающим bridge для работы в 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: []},          
    ]}
  ]
};

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

у Google есть контроль для этого

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

Мне нравится Скользящая карта CSS для этого.

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

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

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

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

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

Я предполагаю использовать CANVAS.

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top