如何在基于 d3.js 的“家谱”中显示婚姻？

Question

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

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

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

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

原文由 byzantine cucumber 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

-- 家谱树 –

谱系树 可能足以满足您的需要。你会让姻亲可以链接，如果你点击他们的名字，图表就会重新绘制，这样你就可以看到他们的血统。

-- 支架布局树 –

与系谱树类似，但是是双向的，这个 Bracket Layout Tree 让你可以处理“这是我的父母、祖父母、孩子、孙子”类型的视图。与谱系树一样，您可以使个体可链接以将括号重新置于该节点的中心。

-- 基于力的布局 –

有一些有趣的基于力的布局看起来很有前途。看看 这个带有智能标签的基于力的布局示例。对如何确定“力”的算法进行调整可以使它成为一棵非常可爱的树，老一代在新一代之上或之下。

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

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

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

原文由 inanutshellus 发布，翻译遵循 CC BY-SA 3.0 许可协议