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。

家族树本质上是二元树 - 我知道，现实生活对于收养，离婚，呃都很棘手，但让我们假设他们是一个二元朝一个方向（祖先）来自特定的人。 / p>

使用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元素。您可以在其上找到一些信息here，here以及它可以执行的一些演示here。

就个人而言，我会选择带有图像地图叠加或可能是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。

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

Answer 9

您可以使用jsPlumb，这对于那种东西非常有用http://jsplumbtoolkit.com/demo/chart/mootools.html

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

9 个答案: