如何使用 HTML CSS 绘制家谱的线条？答案

【问题标题】：How do I draw the lines of a family tree using HTML CSS?如何使用 HTML CSS 绘制家谱的线条？
【发布时间】：2009-11-08 02:10:27
【问题描述】：

我正在尝试实现类似于 http://www.ancestry.com 的功能，但我不知道如何画线。

这是我想做的一个粗略的 ascii 草图：

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

我认为一种方法是创建一个单元格表，并创建线条图像，将每个孩子与他们的父母联系起来。我猜有一种更简单的方法可以做到这一点，但我对 CSS 的了解非常有限。有人对我如何实现这个有建议吗？

【问题讨论】：

标签： javascript html css family-tree

【解决方案1】：

你可以用纯 css 做到这一点。这是一个例子：

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

【讨论】：

web.archive.org/web/20210813023346/https://thecodeplayer.com/…

【解决方案2】：

我会再给出一个答案，尽管上面的答案都是大致的。

假设您想在所有浏览器上工作。如果您需要在 Internet Explorer 上工作，并编写自己的 Canvas 解决方案，您可能需要包含 ExplorerCanvas。

家谱本质上是二叉树——我知道，现实生活在收养、离婚等方面很棘手，但是让我们暂时假设它们是来自特定人的一个方向（祖先）的二叉树。

JavaScript InfoVis Toolkit 是一个使用 Canvas、具有在 IE 上工作的桥梁并使用简单通用数据格式的好工具。

查看示例： 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: []},          
    ]}
  ]
};

我确信还有其他解决方案，我希望您能找到适合您的解决方案。

【讨论】：

网址已更改，因此您的链接不再有效。 Here 是更新后的链接，JIT demos 供将来参考。

【解决方案3】：

图形界面的另一个选项是画布元素。你可以找到一些关于它的信息here、here，以及它可以做什么的一些演示here。

就个人而言，我会选择带有图像地图叠加层的 Canvas 或可能的 Flash。仅使用 div 或表格创建图形布局可能会很快失控并创建巨大而丑陋的代码。虽然这是一个见仁见智的问题。 :)

您可以使用画布来渲染线条，然后为每个节点绝对定位带有文本的 div。或者您可以在画布中渲染整个事物（此时，如果您希望渲染的树具有交互性，则需要一个图像地图叠加层。）

【讨论】：

【解决方案4】：

google 对此有控制权

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

【讨论】：

这是否需要浏览器最终用户安装任何东西？如果可能的话，我想避免这种情况。
不，它只是一个 JavaScript 库。无需安装，适用于所有主要浏览器。

【解决方案5】：

为此我喜欢SlickMap CSS。

由于它是为站点地图而设计的，因此它可以设置嵌套链接列表的样式，但修改它以处理每个单元格中的多个链接是微不足道的，就像我在这里所做的那样：http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html

【讨论】：

【解决方案6】：

一种选择是使用绝对定位和一些图像。您将需要水平线和垂直线图像。然后使用定位将项目与相应的行进行定位。

【讨论】：

【解决方案7】：

到目前为止，我所看到的示例都使用 flash 来处理类似的事情。以http://academia.edu 为例。

否则，我可能会使用绝对定位的 DIV 来组成线条 - 不过这需要一些复杂的计算：)

第三种选择 - 如果您愿意使用更多的 javascript 并牺牲一些浏览器兼容性，则可以使用 SVG 元素。你可以查看这个库：http://raphaeljs.com/ 那里有一个不错的树状演示，您可能会发现它很有用 (http://raphaeljs.com/graffle.html)。

【讨论】：

【解决方案8】：

我猜是使用 CANVAS。

看看.. 可能会给出一些想法 Drawing Graphics with Canvas

【讨论】：

【解决方案9】：

你可以使用 jsPlumb，这对于那种东西很不错http://jsplumbtoolkit.com/demo/chart/mootools.html

【讨论】：