Javascript 如何使用HTML CSS绘制家谱线？

我正在尝试实现一些类似的东西，但我不知道如何划分界限

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

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

我认为一种方法是创建一个单元格表，并创建线条的图像， 把每个孩子和他们的父母联系起来。 我想有一种更简单的方法可以做到这一点，但是我对CSS的了解非常有限。

---

有人对我如何实现这一点有什么建议吗？

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

到目前为止，我看到的示例使用flash来处理类似的内容。比如说

否则，我可能会使用绝对定位的div来组成这些行-尽管这需要一些复杂的计算：）

第三种选择——如果您愿意使用更多javascript并牺牲一些浏览器兼容性，则使用SVG元素。您可以签出此库：

---

其中有一个很好的类似于树的演示，您可能会发现它很有用（）。

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

就个人而言，我会选择带有图像贴图覆盖的画布，或者可能是Flash。仅使用div或table创建图形布局可能会很快失控，并创建巨大而难看的代码。尽管这是一个意见问题。：）

---

您可以使用canvas渲染线，然后使用文本绝对定位每个节点的div。或者，您可以在画布中渲染整个内容（此时，如果您希望渲染的树是交互式的，则需要一个图像贴图覆盖）。

谷歌对此有一个控件

我想是用画布吧

看一看。。也许它给了我们一些想法

---

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

假设您希望在所有浏览器上工作。如果您需要在Internet Explorer上工作，并编写自己的画布解决方案，则可能需要包括

家谱基本上是二叉树——我知道，现实生活中收养、离婚等都很棘手，但让我们先假设它们是从某个特定的人身上向一个方向（祖先）进化的二叉树

JavaScript InfoVis工具包是一个很好的工具，它使用Canvas，包含了在IE上工作的桥梁，并且使用了简单而通用的数据格式

请访问以下网址查看样本：

它可能不完全是你想要的开箱即用，但你可以调整外观和感觉

插件的数据负载非常简单，您的示例如下所示：

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: []},          
    ]}
  ]
};

我相信还有其他解决方案，我希望你能找到一个适合你的解决方案。

我喜欢这个

---

因为它是为站点地图设计的，所以它为嵌套的链接列表设置样式，但是修改它以处理每个单元格中的多个链接并不重要，就像我在这里所做的那样：

您可以使用纯css来完成。以下是一个例子：

---

您可以使用jsPlumb，它非常适合这种类型的东西

这是否需要浏览器最终用户安装任何东西？如果可能的话，我希望避免这种情况。不，它只是一个javascript库。不安装，可在所有主浏览器上使用。URL已更改，因此您的链接不再可用。是更新的链接，供将来参考。