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

Question

我是一名HTML / CSS开发人员，正在以有意义的方式研究构建“家庭树”的javascript解决方案，其中需要显示婚姻（来自家庭以外）。< / p>

基本上我正在考虑基于d3.js的树状图，例如http://bl.ocks.org/4063570，但我很难找到表达“婚姻”的任何内容。

以下是我将依据的数据图片：

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

Answer 1

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

- 谱系树 -

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

- 支架布局树 -

与谱系树类似，但是双向，这个Bracket Layout Tree允许你处理“这里是我的父母，祖父母，孩子，孙子”类型视图。与谱系树一样，您可以使个体可链接以重新定位该节点上的括号。

- 基于力量的布局 -

有一些有趣的基于力量的布局似乎很有希望。看看this example of a force-based layout with smart labels。对算法如何确定“力”的调整可以使这成为一个非常可爱的树，老一代高于或低于新一代。

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

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

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

Answer 2

我还需要与D3绘制血统，所以我想出了如何。我created examples显示了基本功能，然后添加了高级功能，例如扩展和显示后代。

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

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

Answer 3

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

在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的可能性。