我的方法如下：
让我们以您在附图中所示的例子为例：
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函数，它的作用是不绘制它与父级之间的线条：
在代码中检查_elbow函数，它的作用是不绘制它与父级之间的线条：
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等，但您可以根据自己的需求进行更改。您需要将文本居中。
我已经向代码添加了注释以帮助您了解流程。如果您有任何不清楚的地方，请留言，我很乐意澄清。
dTree是一款基于D3构建的开源库，用于创建家谱图（或类似的分层图）。
它处理手动生成D3图形的繁琐部分，并使用简单的JSON数据格式：
[{
name: "Father",
marriages: [{
spouse: {
name: "Mother",
},
children: [{
name: "Child",
}]
}]
}]
如果您有兴趣进行修改，它支持回调用于节点渲染和事件处理。最后，该库截至2016年仍在开发中，欢迎提交拉取请求。
声明：我是dTree的作者。我在像您一样搜索网络并找不到我喜欢的东西后创建了该库。
不太好的消息： 我所做的研究表明，没有直接实现这一功能的开箱即用的d3库而不需要一些自定义。
好消息： 已经有其他人研究过这个问题，并找到了一些很好的起点！我意识到这并不是整个任务的完整解决方案，但是从你的问题中可以看出，迄今为止你遇到的主要困难就是弄清楚从哪里开始（例如，“关于d3.js的教程仅涵盖标准图表，如条形图。”）。在没有更好的东西的情况下，我至少会回应这一部分。
首先，作为对此相关stackoverflow帖子的回复，inanutshellus提供了一些非常棒的d3工具，这些工具可供使用并可能在此处有用。稍加自定义/扩展，他们应该能够相对快速地帮助您达到目标。为了永存的目的，在此再次列出inanutshellus的答案:
有一些选项，但我认为每个选项都需要一些工作。如果在JSON中有一个单一的表示家谱的标准将会很有帮助。我最近注意到geni.com有一个相当深入的API来处理这个问题。也许使用他们的API进行编码可以提高代码重用性...我尝试过 dtree 并且很喜欢它。然而，当你添加了几代人之后，水平显示可能会使整体显示非常大并且难以操作。相反，我使用了 Reingold–Tilford Tree。这个树的一个缺点是每个节点只能有一个父节点：配偶不能在一起显示。为了克服这个限制，我调整了 JSON，将配偶合并为一个实体（例如："丈夫-妻子"），然后将其发送到树中。
回答问题已经过去3年。
现在有Mike制作的族谱树图。
https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
接下来介绍的是 d3.tree - 一款家谱树图 https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
你也可以尝试 Mike 的 D3 Tidy Tree https://beta.observablehq.com/@mbostock/d3-tidy-tree
示例：https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7