你如何在d3.js中创build一棵家族树？
我目前正在做一个小型的家谱实验，想要实现一个简单的家谱，如下图所示。
迄今为止，最好的search结果只能得出一个例子，其中一个孩子只能有一个父节点。 但是我需要的是能够创build实体之间的链接（从父亲到母亲）以及节点和其他链接（从孩子到父母链接）之间的链接。 目前我没有一个固定的数据模式。
我select了d3.js ， 因为它看起来能够完成这项工作 。 我只是不知道如何甚至从哪里开始。 有关d3.js的教程仅涵盖像条形图这样的标准图表。
我希望有人能帮助我。
我的方法如下：
让我们看看你在附图中所示的例子：
老石珍妮也是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之间的链接，这个节点有它的一组子节点。
- 我已经创build了一个标记为
hidden: true,的节点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 …但是你可以根据你的需求来改变它。 您需要将文字居中。
我已经添加了对代码的评论，以帮助您了解stream程。 以防万一你不清楚，请评论我会很乐意澄清。
这不是一个好消息：我所做的研究表明，没有开箱即用的d3库，无需定制就能直接完成此任务。
好消息是：还有一些其他人已经看到了这一点，并find了一些很好的起点！ 我意识到这不是一个完整的解决scheme，但是从你的问题来看，目前为止，你的困难中很大一部分只是简单地从头开始（例如“关于d3.js的教程只包含标准图表像条形图“）。 在没有更好的情况下，我至less会回应这一部分。
首先，在几年前对这个相关的stackoverflow post的回应中，inanutshellus提供了一些很棒的d3工具，可以在这里使用。 通过一些轻量级的定制/扩展，他们应该能够让你快速到达目的地。 对于后人，inanutshellus的答案在这里转载：
有一些select，但我相信每个人都需要一点工作。 如果在JSON中有一个代表一个家族树的标准，这将会有所帮助。 我最近注意到，geni.com有一个非常深入的API。 也许编码对他们的API将是一个好主意的可重用性…
– 谱系树 –
谱系树可能已经足够满足您的需求。 如果你点击他们的名字，图表就会重画，所以你可以看到他们的血统。
– 支架布局树 –
类似于谱系树，但是双向的，这个支架布局树让你处理一个“这里是我的父母，祖父母，孩子，孙子”types的观点。 就像谱系树一样，你可以让个体链接来重新定位该节点上的括号。
– 基于力量的布局 –
有一些有趣的基于力量的布局看起来很有希望。 看看这个带智能标签的基于力的布局的例子 。 对于如何确定“力量”的algorithm的调整可以使其成为一棵非常可爱的树，其中较老的一代高于或低于较新的一代。
– 聚类树状图（为什么失败） –
我见过的d3.js布局最适合家族树，假设单个节点是父节点，而您需要将父节点表示为两个节点之间（在视觉上为“T”）的组合：一个节点是你的树的成员，还有一个代表姻亲的浮动节点。 调整聚类树状图以做到这一点应该是可行的，但不是没有重大的修改。
如果你或者其他任何人处理这个问题，请告诉我。 我希望看到（并从中受益）这项工作，并且如果可行的话，也可以为此做出贡献。
在具体的实现方面，mj8591提出了一个类似的问题的家庭树问题。 然而幸运的是，这个问题包含了一个小提琴（所有的js代码），它包含了你需要的大部分或全部组件，而来自mdml的响应包含了另一个小提琴，它为每个节点增加了一些更细粒度的“可点击性”。
再一次，这不是什么automagic，但希望这些资源足以让你一个伟大的开始！
dTree是一个build立在D3之上的开源库，可以创build家族树（或类似的分层图）。
它处理手动生成D3graphics的麻烦部分，并使用简单的json数据格式：
[{ name: "Father", marriages: [{ spouse: { name: "Mother", }, children: [{ name: "Child", }] }] }]
如果你有兴趣修改它支持callback节点呈现和事件处理程序。 最后，图书馆截至2016年正在开发中，欢迎提出请求。
免责声明：我是dTree的作者。 我像你一样searchnetworking后创build了图书馆，没有find任何我喜欢的东西。
我试了一下 ，喜欢它。 但是，当你添加几代时，水平显示可以使整个显示非常大且笨重。 相反，我使用了Reingold-Tilford树 。 这个树的一个缺点是每个节点只能有一个父节点：配偶不能彼此并排显示：为了克服这个限制，我调整了JSON以在发送之前将配偶合并成一个实体（例如“夫妻”）它的树。
我不知道这是否对你有任何帮助，因为你说过要使用d3.js，但还有另外一个工具，你可能想用jsplumb来调查一下。 这种项目似乎很完美： 主页 。 他们也有一些体面的教程。 还有一个更像文件 ， 另一个更互动 。
就像我说的，如果切换技术还不算太迟，这可能值得尝试。 这是所有的HTML，CSS和JavaScript，所以它不应该是一个苛刻的过渡。
我知道这个问题相当老，但如果有人仍然感兴趣，请看看我的示例 。
