如何使用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

Answer 5

我喜欢SlickMap CSS 。

因为它是为站点地图制作的，所以它设置了嵌套的链接列表，但是修改它以处理每个单元格中的链接比较简单，就像我在这里做的那样： http ： //dl.dropbox.com/u/546793/demo/SlickmapCSS_rich /index.html

Answer 6

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

Answer 7

到目前为止我看过的例子都使用flash来做类似的事情。 例如http://academia.edu 。

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

第三种选择 - 如果你愿意使用更多的javascript并牺牲一些浏览器的兼容性就是使用SVG元素。 你可以查看这个库： http ： //raphaeljs.com/那里有一个很好的树状演示，你可能会觉得很有用（ http://raphaeljs.com/graffle.html ）。

Answer 8

我想用CANVAS。

看看..可能它给了一些想法绘制图形与画布

Answer 9

你可以使用jsPlumb，它非常适合那种东西http://jsplumbtoolkit.com/demo/chart/mootools.html