你如何在d3.js中创build一棵家族树?

我目前正在做一个小型的家谱实验,想要实现一个简单的家谱,如下图所示。

迄今为止,最好的search结果只能得出一个例子,其中一个孩子只能有一个父节点。 但是我需要的是能够创build实体之间的链接(从父亲到母亲)以及节点和其他链接(从孩子到父母链接)之间的链接。 目前我没有一个固定的数据模式。

我select了d3.js , 因为它看起来能够完成这项工作 。 我只是不知道如何甚至从哪里开始。 有关d3.js的教程仅涵盖像条形图这样的标准图表。

我希望有人能帮助我。

这就是结果应该如何

6 Solutions collect form web for “你如何在d3.js中创build一棵家族树?”

我的方法如下:

让我们看看你在附图中所示的例子:

老石珍妮也是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,所以它不应该是一个苛刻的过渡。

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

  • 如何生成Google Analytics的访问者stream量图表/图表?
  • 在d3 javascript中的圆形对象内添加图像?
  • 如何在d3.js中select当前元素的父元素
  • D3.js:“未捕获的SyntaxError:意外的令牌非法”?
  • 如何在D3图表的标签中包含换行符?
  • 可以input()select追加/插入后重用吗?
  • d3更新数据和更新graphics
  • 一本学习D3.js的好书
  • 你可以在使用d3.js时在文本中插入换行符吗?
  • 如何用一个值函数设置多个属性?
  • d3js树广场