Javascript 如何在基于d3.js的&x27；家谱'；？

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

基本上，我是在看一个树状图，基于d3.js，例如，但我一直在努力找到任何表达“婚姻”的东西

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

---

任何帮助/建议/链接都将不胜感激！我只是不知道这是否可能，但我很想使用d3.js，因为它看起来做工很好，而且看起来很通用。

有一些选择，但我相信每个都需要一些工作。如果有一个单一的标准来表示JSON中的族谱，这将有所帮助。我最近注意到geni.com对此有一个相当深入的API。也许根据他们的API编码是一个好主意，可以重用

--系谱树--

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

--括号布局树--

与系谱树类似，但是是双向的，这允许您处理“这是我的父母、祖父母、孩子、孙子女”类型的视图。与系谱树一样，您可以将个人链接到该节点上，以使括号重新居中

--基于力的布局--

有一些有趣的基于原力的布局似乎很有前途。看一看。调整算法以确定“力”的方式可以使其成为一棵非常可爱的树，老一代的树高于或低于新一代

--集群密集型内存（为什么失败）--

我看到的最适合家谱的d3.js布局假定一个节点是父节点，而您需要将父节点表示为两个节点的组合（可视为两个节点之间的“T”）：一个节点是树的成员，另一个节点是表示姻亲的浮动节点。调整集群密度图来实现这一点应该是可行的，但必须进行重大修改

---

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

我还需要与D3一起绘制谱系，所以我找到了方法。我已经演示了基本功能，然后添加了高级功能，如扩展和显示子体

我不知道你想如何展示婚姻。婚姻是与生俱来的祖先血统，但不是在后代表中。该代码可以调整为显示后代节点中的配偶

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

---

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

在d3中，您可以扩展所有的数据结构以满足您的需要，然后有更多的工作来绑定数据，但它都是可定制的。下面是我将在force布局中使用的数据结构示例

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

一方面，你有人，可以在图（框）中表示为节点。然后你有连接线；我假设有不同的类型，所以您可以将它们添加到自己的类中。要实现这一点，您需要使用svg:path元素。我看到的唯一障碍是你必须编写自己的布局算法。你有没有想出一个好的解决方案？我也希望做同样的事情。也希望能找到解决这个问题的办法。。。