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

Question

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

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

我为此选择了 d3.js，因为它看起来可以胜任这项工作。我只是不知道如何开始，甚至不知道从哪里开始。有关 d3.js 的教程仅涵盖条形图等标准图表。

我希望有人可以帮助我。

结果应该是这样的

score 48 · Accepted Answer

我的方法如下：

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

Jenny Of Oldstones也是 Aegon V 的孩子，但这个孩子与 Aegon V 的其他孩子之间的区别在于，在这种情况下，我没有画出它之间的联系。

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

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

在代码中检查_elbowfunction_ 这不会在它和它的父级之间画线：

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

下一个场景是节点Aerys II 和 Rahella之间的链接，这个节点有它的一组子节点。

我在它们之间创建了一个节点，标记为hidden: true,
我display:none为这样的节点制作。孩子们似乎来自节点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...，但您可以根据需要更改它。您需要将文本居中。

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

score 19 · Accepted Answer

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

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

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

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

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

score 9 · Accepted Answer

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

好消息：其他一些人对此进行了研究并找到了一些很好的起点！我意识到这不是手头整个任务的完整解决方案，但是从您的问题看来，到目前为止，您的大部分困难只是弄清楚从哪里开始（例如“关于 d3.js 的教程仅涵盖标准条形图之类的图表。”）。在没有更好的情况下，我至少会在这里回应那部分。

首先，在几年前对这个相关的 stackoverflow 帖子的回应中，inanutshellus 提供了一些很棒的 d3 工具，这些工具可以在这里使用。通过一些轻量级的定制/扩展，它们应该能够让您相对快速地到达目的地。为了后代，这里转载了inanutshellus的答案：

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

-- 谱系树 --

谱系树可能足以满足您的需求。您可以使 in-law 的可链接，如果您点击他们的名字，图表会重新绘制，这样您就可以看到他们的血统。

-- 括号布局树 --

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

-- 基于力的布局 --

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

-- 聚类树状图（为什么失败） --

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

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

在具体实现方面，mj8591问这个问题是关于一个类似的家谱有不同的问题。但是，幸运的是，这个问题包括一个小提琴（所有 js 代码），它具有您需要的大部分或所有组件，并且来自 mdml 的响应包括另一个小提琴，它为每个节点添加了一些更细粒度的“可点击性”。

同样，这不是自动的，但希望这些资源足以让您有一个良好的开端！

score 4 · Accepted Answer

我尝试了 dtree并喜欢它。但是，当您添加几代时，水平显示会使整体显示非常大且笨拙。相反，我使用了Reingold–Tilford 树。这棵树的一个缺点是每个节点只能有一个父节点：配偶不能并排显示：为了克服这个限制，我在发送之前调整了 JSON 以将配偶合并为一个实体（例如：“丈夫 - 妻子”）它到树上。