javascript - 如何在基于 'family-tree' 的 d3.js 中显示婚姻？

Question

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

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

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

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

Answer 1

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

-- 系谱树 --

The Pedigree Tree可能足以满足您的需求。您可以将姻亲设为可链接，如果您点击他们的名字，图表将重新绘制，以便您可以看到他们的血统。

-- 括号布局树 --

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

-- 基于力的布局 --

有一些有趣的基于力的布局看起来很有前途。看看this example of a force-based layout with smart labels .对如何确定“力”的算法进行调整可以使它成为一棵非常可爱的树，老一代在新一代之上或之下。

-- 聚类树状图(失败的原因)--

我见过的最适合家谱的 d3.js 布局假定单个节点是父节点，而您需要将父节点表示为两个节点的组合(视觉上是“T”之间):一个节点是您的树的成员，一个 float 节点代表姻亲。调整聚类树状图来执行此操作应该是可行的，但并非没有重大修改。

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