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

发布于 2024-08-09 21:39:12 字数 469 浏览 3 评论 0原文

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

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

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

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

原文

I'm trying to implement something similar to what http://www.ancestry.com has, but I'm not sure how to draw the lines.

Here is a rough ascii sketch of what I want to do:

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

I think one way to do this is to create a table of cells, and create images of the lines,
connecting each of the children to their parents.
I'm guessing there's an easier way to do this though, but my knowledge of CSS is quite limited.
Does anyone have a suggestion on how I can implement this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱的十字路口 2024-08-16 21:39:12

你可以用纯CSS来做到这一点。这是一个示例：

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

回复收藏 0 原文

雅心素梦 2024-08-16 21:39:12

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

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

我确信还有其他解决方案，我希望您找到适合您的解决方案。

I'll throw one more answer in, although the answers above are all in the ballpark.

Let's assume you want to work on all browsers. If you need to work on Internet Explorer, and you code your own Canvas solution, you may want to include ExplorerCanvas.

Family trees are essentially binary trees -- I know, real life is tricky with adoptions, divorces, ugh, but let's just assume for a second that they're binary going in one direction (ancestors) from a particular person.

A good tool that uses Canvas, has the bridge to work on IE included, and uses a simple and general data format is the JavaScript InfoVis Toolkit.

Check out the sample at:
http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html

It may not be exactly what you want out of the box, but you can tweak the look and feel.

The data payload to plug-in is very simple, and your example would look something like this:

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

I'm sure there are other solutions out there, and I hope you find one that works for you.

回复收藏 0 原文