如何使用HTML CSS绘制族树的线条？

Question

我正在尝试实现与http://www.ancestry.com类似的东西,但我不确定如何绘制线条.

这是我想要做的粗略的ascii草图:

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

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

Answer 1

你可以用纯css做到这一点.这是一个例子:

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

Answer 2

我还会再提一个答案,虽然上面的答案都在争议中.

假设您想要在所有浏览器上工作.如果您需要使用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: []},          
    ]}
  ]
};

我相信还有其他解决方案,我希望你能找到适合你的解决方案.

Answer 3

图形界面的另一个选项是canvas元素.你可以在它身上找到一些信息在这里,在这里,和什么可以做一些演示这里.

就个人而言,我会选择带有图像地图叠加或可能是Flash的Canvas.仅使用div或表创建图形布局可能会非常快速地失控,并创建庞大而丑陋的代码.虽然这是一个意见问题.:)

您可以使用画布来渲染线条,然后使用文本为每个节点绝对定位div.或者您可以在画布中渲染整个事物(如果您希望渲染树是交互式的,那么您需要一个图像映射覆盖.)

Answer 4

谷歌有一个控制权

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