33

我是一名 HTML/CSS 开发人员，正在研究用于构建“家谱”的 javascript 解决方案，该“家谱”需要以有意义的方式显示婚姻（当然来自家庭之外）。

本质上，我正在研究基于 d3.js 的树状图，例如http://bl.ocks.org/4063570，但我一直在努力寻找任何表达“婚姻”的东西。

下面是我将基于它的数据的图像：

这是我的数据

任何帮助/建议/链接将不胜感激！我只是不知道这是否可能，但我很想使用 d3.js，因为它看起来制作精良，而且显然用途广泛。

4

3 回答 3

32

有一些选择，但我相信每个都需要一些工作。如果有一个单一的标准来表示 JSON 中的家谱，那将会有所帮助。我最近注意到 geni.com 对此有一个相当深入的 API。也许针对他们的 API 进行编码对于可重用性来说是一个好主意......

-- 谱系树 --

谱系树可能足以满足您的需求。您可以使 in-law 的可链接，如果您点击他们的名字，图表会重新绘制，这样您就可以看到他们的血统。

-- 括号布局树 --

类似于谱系树，但是是双向的，这个括号布局树让您可以处理“这里是我的父母、祖父母、孩子、孙子”类型的视图。像谱系树一样，您可以使个人可链接以将括号重新居中该节点上。

-- 基于力的布局 --

有一些有趣的基于力的布局似乎很有希望。看看这个带有智能标签的基于力的布局示例。对如何确定“力”的算法进行调整可以使它成为一棵非常可爱的树，老一代高于或低于新一代。

-- 聚类树状图（为什么失败） --

我见过的最适合家谱的 d3.js 布局假设单个节点是父节点，而您需要将父节点表示为两个节点之间的组合（视觉上是“T”）：一个节点是您树的成员，并且是代表姻亲的一个浮动节点。调整集群树状图来做到这一点应该是可行的，但并非没有重大修改。

如果你——或其他任何人——解决这个问题，请告诉我。我希望看到这项工作（并从中受益），如果可行的话，我可能会为此做出贡献。

于 2013-02-22T20:37:19.330 回答
6

我还需要用 D3 绘制系谱，所以我想出了如何。我创建了显示基本功能的示例，然后添加了扩展和显示后代等高级功能。

我不知道你想如何展示婚姻。婚姻是祖先谱系中固有的，而不是后代图谱中固有的。该代码可以修改为在后代节点中显示配偶。

这是它的外观照片。可以根据需要调整样式。

在此处输入图像描述

于 2015-06-04T15:35:59.233 回答
1

这需要一些工作，但基本上我提出的想法是使用一种称为关系的特殊节点进行强制布局，该节点不画圆。它代表两个主体之间的绑定，可以是更多节点的父节点。

在 d3 中，您可以扩展所有数据结构以适合您想要的内容，然后还有更多工作来绑定数据，但它都是可定制的。这是我将在力布局中使用的数据结构示例。

{
  "nodes": [
    {
      "type": "root",
      "x": 300,
      "y": 300,
      "fixed": true
    },
    {
      "type": "male",
      "name": "grandpa"
    },
    {
      "type": "female",
      "name": "grandma"
    },
    {
      "type": "relationship"
    },
    {
      "type": "male",
      "name": "dad"
    },
    {
      "type": "female",
      "name": "mum"
    },
    {
      "type": "relationship"
    },
    {
      "type": "male",
      "name": "I"
    }
  ],
  "links": [
    {
      "source": 0,
      "target": 2
    },
    {
      "source": 1,
      "target": 2
    },
    {
      "source": 0,
      "target": 3
    },
    {
      "source": 3,
      "target": 4
    },
    {
      "source": 4,
      "target": 6
    },
    {
      "source": 5,
      "target": 6
    },
    {
      "source": 6,
      "target": 7
    }
  ]
}

希望我能澄清一些关于 d3 的可能性。

于 2015-06-19T10:16:02.893 回答