Question

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

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

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

我希望有人能帮助我。

This is how the result should look like

Answer 1

我的方法如下：

让我们举一个您在附图中说明的例子：

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
 }

在代码中检查_elbow function_这样做的工作就是不在它和它的父项之间划一条线：

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

下一个场景是Node 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 ...但您可以根据您的要求进行更改。您需要将文本居中。

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

Answer 2

dTree是一个在D3之上构建的开源库，可以创建族树（或类似的层次图）。

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

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

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

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

Answer 3

我知道这个问题相当陈旧，但如果有人仍然感兴趣，请查看my sample here。

Answer 4

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

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

首先，在几年前对this related stackoverflow post的回复中，inanutshellus提供了一些很好的d3工具可用，可以在这里使用。通过一些轻松的定制/扩展，他们应该能够相对快速地到达您的目的地。对于后代，inanutshellus的答案在此转载：

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

- 谱系树 -

The Pedigree Tree   可能足以满足您的需求。你让姻亲可以链接，   如果你点击他们的名字，图表会重绘，所以你可以   看他们的血统。

- 支架布局树 -

与谱系树类似，但是双向，这是Bracket Layout Tree   让你处理“这里是我的父母，祖父母，孩子，   孙子“类型视图。像谱系树，你做的   个人可链接以重新定位该节点上的括号。

- 基于力量的布局 -

有一些有趣的基于力量的布局似乎很有希望。   看看this example of a force-based layout with smart labels。调整到   如何确定“力”的算法可以使这成为一个   非常可爱的树，老一代以上或以下的新一代。

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

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

如果你 - 或其他任何人 - 解决这个问题，请告诉我。 ID   喜欢看（并从中受益）工作，也许能够做出贡献   如果可行的话。

就具体实施而言，mj8591询问this question有关具有不同问题的类似家谱。但是，幸运的是，您的问题包括一个小提琴（所有js代码），其中包含您需要的大部分或全部组件，而response from mdml包含另一个小提琴，可为每个节点添加更细粒度的“可点击性”。 / p>

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

Answer 5

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