你如何在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,所以它不应该是一个苛刻的过渡。

    我知道这个问题相当老,但如果有人仍然感兴趣,请看看我的示例 。

      Interesting Posts