如何显示基于“家庭树”一d3.js婚姻？(How do I show marriages in a

我是一个HTML / CSS开发人员，研究建立了“家庭树”，这需要证明婚姻 （从家族之外，当然）以一种有意义的方式JavaScript的解决方案。

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

下面是我，就会被其基础数据的图像：

任何帮助/建议/链接，将不胜感激！我只是不知道，如果它甚至有可能，但喜欢使用d3.js，因为它看起来如此制作精良，显然多才多艺。

Answer 1:

有一些选择，但我相信每一个需要一些工作。如果有一个统一的标准用于表示JSON家谱这将有助于。我最近注意到，geni.com有相当深入的API为这一点。也许编码对他们的API将是可重用性好主意......

- 系谱树 -

谱系树可能足以满足您的需求。你会是在法律的可连接的，在这里，如果你点击他们的名字图表会重绘，所以你可以看到他们的后裔。

- 支架布局树 -

类似于谱系树，而是双向的，这架布局树，您可以处理一个“这里是我的父母，祖父母，子女，孙子女”类型视图。像谱系树，你会做个人可链接重新中心在该节点上的支架。

- 力为基础的布局 -

还有一些有趣的基于力的布局似乎有希望。看看与智能标签基于力布局的这个例子。调整的算法如何“力”被确定可以使这成为一个非常可爱的树，老一代的上方或下方较新的。

- 集群树状图（失败的原因） -

该d3.js布局我见过的最能借给自己的家谱假设一个节点是父，而你需要表示父为一体的组合（视觉上“T”之间）两个节点：一个节点是是你的树中的一员，并表示婆婆一个浮动节点。调整集群树状图来做到这一点应该是可行的，但并非没有显著修改。

如果你 - 或任何其他人对于这个问题 - 解决这个问题，让我知道。我想看看（并从中受益）的工作，并可能能够如果可行作出贡献。

Answer 2:

我还需要绘制D3血统，所以我想出如何。我已创建的实例，展示了基本的功能，然后添加先进的功能，如扩大和显示后代。

我不知道你是怎么想显示的婚姻。婚姻是在一个祖先谱系但不是在一个descendancy图表所固有的。该代码可以用于显示后代节点的配偶。

下面是它的外观一峰。根据需要的样式可以调整。

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

文章来源: How do I show marriages in a d3.js based 'family-tree'?