15

我正在尝试实现类似于http://www.ancestry.com的东西，但我不确定如何画线。

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

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

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

4

9 回答 9

26

你可以用纯CSS来做。这是一个例子：

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

于 2012-04-23T10:19:17.287 回答
10

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

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

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

于 2009-11-08T04:26:22.343 回答
7

图形界面的另一个选项是画布元素。您可以在此处、此处找到有关它的一些信息，以及它可以在此处执行的一些演示。

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

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

于 2009-11-08T02:49:06.750 回答
7

谷歌对此有控制权

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

于 2009-11-08T03:03:28.110 回答
4

为此，我喜欢SlickMap CSS。

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

于 2011-04-27T09:06:35.050 回答
2

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

于 2009-11-08T02:15:15.353 回答
1

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

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

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

于 2009-11-08T02:22:05.587 回答
1

我想使用画布。

看看.. 可能是它给出了一些想法 用 Canvas 绘制图形

于 2009-11-08T03:21:55.123 回答
0

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

于 2014-04-03T01:55:51.973 回答