javascript 如何在基于 d3.js 的“家谱”中显示婚姻？

How do I show marriages in a d3.js based 'family-tree'?

提问by byzantine cucumber

I'm a HTML/CSS developer, researching javascript solutions for building a 'family-tree' which needs to show marriages(from outside the family, of course) in a meaningful way.

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

Essentially I'm looking at basing it upon a dendrogram, based on d3.js, e.g. http://bl.ocks.org/4063570, but I've struggled to find anything out there that expresses 'marriages'.

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

Below is an image of the data I will be basing it upon:

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

Any help / suggestions / links would be much appreciated! I just don't know if it's even possible, but would love to use d3.js as it looks so well-made, and apparently versatile.

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

回答by inanutshellus

There are some options, but I believe each would require a bit of work. It would help if there were one single standard for representing a family tree in JSON. I've recently noticed that geni.com has a quite in-depth API for this. Perhaps coding against their API would be a good idea for reusability...

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

-- Pedigree tree --

-- 谱系树 --

The Pedigree Treemight be sufficient for your needs. You'd make in-law's linkable, where if you clicked on their name the graph would redraw so you could see their lineage.

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

-- Bracket Layout Tree --

-- 支架布局树 --

Similar to the Pedigree Tree, but bidirectional, this Bracket Layout Treelets you handle a "here are my parents, grandparents, children, grandchildren" type view. Like the Pedigree Tree, you'd make individuals linkable to re-center the bracket on that node.

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

-- Force-Based Layout --

-- 基于力的布局 --

There are some interesting force-based layouts that seem promising. Take a look at this example of a force-based layout with smart labels. An adjustment to the algorithm for how the "force" is determined could make this into a very lovely tree, with older generations above or below newer ones.

有一些有趣的基于力的布局看起来很有希望。看看这个带有智能标签的基于力的布局示例。对如何确定“力”的算法进行调整可以使其成为一棵非常可爱的树，老一代在新一代之上或之下。

-- Cluster Dendogram (why it fails) --

-- 聚类树状图（失败的原因）-

The d3.js layouts I've seen that would lend themselves best to family trees assume a single node is the parent, whereas you need to represent the parent as the combination of (visually a "T" between) two nodes: one node that is a member of your tree, and one floating node that represents the in-law. Adjusting a cluster dendogram to do this should be feasible but not without significant modification.

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

If you--or anyone else for that matter--tackle this, let me know. I'd like to see (and benefit from) the work and may be able to contribute to it if feasible.

如果你——或者其他任何人——解决了这个问题，请告诉我。我希望看到（并从中受益）这项工作，并且在可行的情况下可能会做出贡献。

回答by inanutshellus

I also needed to draw pedigrees with D3 so I figured out how. I have created examplesthat show the basic functionality and then add on advanced features such as expanding and showing descendants.

我还需要用 D3 绘制谱系，所以我想出了方法。我已经创建了展示基本功能的示例，然后添加了扩展和显示后代等高级功能。

I don't know how you want to display marriages. Marriages are inherent in an ancestral pedigree but not in a descendancy chart. The code could be adapted to show spouses in the descendant nodes.

我不知道你想怎么展示婚姻。婚姻是祖先谱系中固有的，但不是后代图谱中固有的。可以修改代码以在后代节点中显示配偶。

Here's a pic of how it looks. The style can be tweaked as desired.

这是它的外观图片。可以根据需要调整样式。

回答by David Lemon

This needs some work, but essentially the idea I propose is do a force layout with a special kind of node called relationship that do not draw a circle. It represents the bind between two subjects and can be the parent of more nodes.

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

In d3 you can extend all the data structures to fit what you want, then there is more work to bind the data but it is all customizable. Here is a sample of the data structures I would use in the force layout.

在 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
    }
  ]
}

Hope I clarified something about the possibilities of d3.

希望我澄清了一些关于 d3 的可能性。