如何在基于d3.js的“family-tree”中显示婚姻？ [英] How do I show marriages in a d3.js based 'family-tree'?

问题描述

我是一个HTML / CSS开发人员，研究JavaScript解决方案，以有意义的方式建立一个需要显示婚姻（来自家庭以外）的家谱树。

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.

基本上，我正在根据d3.js查看一个树状图，例如 http://bl.ocks.org/4063570 ，但我很难找到任何东西表示婚姻。

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'.

下面是我将根据的数据的图片：

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

img src =https://i.stack.imgur.com/ekv8w.jpgalt =这里是我的数据>

任何帮助/建议/链接非常感谢！我只是不知道如果它是可能的，但愿意使用d3.js，因为它看起来很好，显然是多才多艺。

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.

推荐答案

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

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...

- 谱系树 -

-- Pedigree tree --

谱系树可能足以满足您的需求。

The Pedigree Tree might 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 Tree lets 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.

- 基于力的布局 -

-- 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）是一个非常可爱的树， （为什么它失败） -

-- Cluster Dendogram (why it fails) --

我见过的d3.js布局最适合家庭树，假设一个节点是父节点，而你需要以表示父节点作为两个节点（作为树的成员的一个节点和表示法律的浮动节点）的组合（视觉上为T）。调整集群树状图以执行此操作应该是可行的，但不是没有显着修改。

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.

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

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.

这篇关于如何在基于d3.js的“family-tree”中显示婚姻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！