如何在基于d3.js的"家庭树"中展示婚姻？

Question

我是一名HTML/CSS开发人员,正在研究构建"家庭树"的javascript解决方案,这种解决方案需要以有意义的方式展示婚姻(当然来自家庭以外).

基本上我看着它立足于一个树状图的基础上,d3.js,例如http://bl.ocks.org/4063570,但我在努力寻找任何东西在那里,表示"结婚".

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

任何帮助/建议/链接将不胜感激!我只是不知道它是否可能,但是我很乐意使用d3.js,因为它看起来很精致,而且看起来很多功能.

Answer 1

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

- 谱系树 -

谱系树可能足以满足您的需求.你可以让in-law成为可链接的,如果你点击他们的名字,图表会重新绘制,这样你就可以看到他们的血统了.

- 支架布局树 -

类似于谱系树,但是双向,这个支架布局树可以让你处理"这里是我的父母,祖父母,孩子,孙子"类型的视图.与谱系树一样,您可以使个体可链接以重新定位该节点上的括号.

- 基于力的布局 -

有一些有趣的基于力量的布局似乎很有希望.看一下使用智能标签的基于力的布局示例.对算法如何确定"力"的调整可以使这成为一个非常可爱的树,老一代高于或低于新一代.

- 聚类树状图(为什么它失败) -

我见过的d3.js布局最适合家庭树,假设单个节点是父节点,而你需要将父节点表示为两个节点之间的组合(视觉上为"T"):一个节点是树的成员,还有一个代表姻亲的浮动节点.调整聚类树状图来做到这一点应该是可行的,但不是没有重大修改.

如果你 - 或其他任何人 - 解决这个问题,请告诉我.我希望看到(并从中受益)这项工作,如果可行的话,也许能够为此做出贡献.

Answer 2

我还需要用D3绘制血统,所以我想出了如何.我创建了一些示例来显示基本功能,然后添加高级功能,例如扩展和显示后代.

我不知道你想如何展示婚姻.婚姻是祖先血统中固有的,但不是在下降图表中.代码可以适用于显示后代节点中的配偶.

这是一张它看起来如何的照片.可以根据需要调整样式.