如何在 d3.js 中创建家谱？

Question

我目前正在做一个小型家谱实验，想实现一个简单的家谱，如下图所示。

迄今为止最好的搜索结果只产生了 child 只能有一个 parent 节点的例子。但我需要的是能够在实体（从父亲到母亲）之间创建 link 以及在节点和其他 link 之间创建 link（从 child 到 father-mother link)。目前我没有固定的数据模式。

我选择了d3.js for this because it looks like would be capable of doing the job。我只是不知道如何甚至从哪里开始。关于 d3.js 的教程仅涵盖条形图等标准图表。

我希望有人能帮助我。

Answer 1

不太好的消息：我所做的研究表明，没有开箱即用的 d3 库可以在不进行一些定制的情况下直接完成此任务。

好新闻：已经有其他一些人对此进行了研究，并找到了一些很好的起点！我意识到这不是手头整个任务的完整解决方案，但从您的问题看来，到目前为止，您的大部分困难只是简单地弄清楚从哪里开始（例如 "Tutorials about d3.js only cover standard charts like bar charts."）。在没有更好的情况下，我至少会在这里回复一下。

首先，在几年前对 this related Whosebug post 的回应中，inanutshellus 提供了一些很棒的 d3 工具，可用并且可以在这里使用。有了一些灯光 customization/extension，他们应该能够相对快速地把你带到你要去的地方。为了后代，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...

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

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.

在具体实现方面，mj8591 要求 this question regarding a similar family tree with a different problem. However, luckily for you that question includes a fiddle (all the js code) that has most or all the components that you need, and the response from mdml 包括另一个 fiddle 为每个节点添加一些更细粒度的 "clickability"。

再说一次，这不是什么自动魔法，但希望这些资源足以让您有个好的开始！

Answer 2

我不知道这对您是否有帮助，因为您说过您将要使用 d3.js，但您可能想使用另一个名为 jsplumb 的工具。它似乎非常适合这种项目：home page. They also have some decent tutorials. There is one more like docs, and another more interactive.

就像我说的，如果现在切换技术还不算太晚，这可能值得一试。都是html、css、javascript，所以应该不是一个苛刻的过渡。

Answer 3

我的做法如下：

让我们以您在附图中说明的示例为例：

Jenny Of Oldstones也是Aegon V的child但是这个child的区别和 Aegon V 的其他 children 是，在这种情况下，我没有在它之间绘制 link。

这是通过在节点JSON中设置节点为no_parent:true来完成的示例：

//Here Q will not have a parent
 {
            name: "Q",
            id: 16,
            no_parent: true
 }

在代码中检查 _elbow 函数_这不会在它和它的 parent:

之间画线

if (d.target.no_parent) {
    return "M0,0L0,0";
}

下一个场景是 link 在节点 Aerys II 和 Rahella 之间移动，这个节点有它的一组 children。

我在它们之间创建了一个节点，标记为 hidden: true,
我为这样的节点制作了display:none。 children 似乎来自节点 Aerys II 和 Rahella

JSON 示例：

//this node will not be displayed
{ name: "",
    id: 2,
    no_parent: true,
    hidden: true,
    children: [....]

    }

在代码中检查我制作矩形的地方，下面的代码隐藏了节点：

    .attr("display", function (d) {
    if (d.hidden) {
        return "none"
    } else {
        return ""
    };
})

完整代码在这里： http://jsfiddle.net/cyril123/0vbtvoon/22/

在上面的示例中，我使用了节点名称 A/B/C...但是您可以根据需要更改它。您需要将文本居中。

我在代码中添加了注释以帮助您理解流程。如果您不清楚任何一点，请发表评论，我很乐意澄清。

Answer 4

dTree 是一个建立在 D3 之上的开源库，用于创建家谱（或类似的层次图）。

它处理手动生成 D3 图形的麻烦部分，并使用简单的 json 数据格式：

[{
  name: "Father",
  marriages: [{
    spouse: {
      name: "Mother",
    },
    children: [{
      name: "Child",
    }]
  }]
}]

如果您有兴趣修改它支持节点渲染和事件处理程序的回调。最后，截至 2016 年，该库正在开发中，欢迎提出拉取请求。

免责声明：我是 dTree 的作者。我像你一样在网上搜索后创建了这个库，但没有找到我喜欢的东西。

Answer 5

我试过了dtree and liked it. However, when you add several generations, the horizontal display can make the overall display very large and unwieldy. Instead, I used the Reingold–Tilford Tree。这棵树的一个缺点是每个节点只能有一个父节点：配偶不能并排显示：为了克服这个限制，我调整了 JSON 将配偶合并为一个实体（例如：“丈夫 - 妻子” ) 就在将其发送到树之前。