我目前正在进行一个小型家谱实验,并想实现一个简单的家谱,如下图所示。
到目前为止,最好的搜索结果只产生了一个子节点只能有一个父节点的例子。但我需要的是在实体之间创建链接(从父亲到母亲)以及在节点和其他链接之间创建链接(从孩子到父亲-母亲链接)的能力。目前我没有固定的数据模式。
我为此选择了 d3.js,因为它看起来可以胜任这项工作。我只是不知道如何开始,甚至不知道从哪里开始。有关 d3.js 的教程仅涵盖条形图等标准图表。
我希望有人可以帮助我。
我目前正在进行一个小型家谱实验,并想实现一个简单的家谱,如下图所示。
到目前为止,最好的搜索结果只产生了一个子节点只能有一个父节点的例子。但我需要的是在实体之间创建链接(从父亲到母亲)以及在节点和其他链接之间创建链接(从孩子到父亲-母亲链接)的能力。目前我没有固定的数据模式。
我为此选择了 d3.js,因为它看起来可以胜任这项工作。我只是不知道如何开始,甚至不知道从哪里开始。有关 d3.js 的教程仅涵盖条形图等标准图表。
我希望有人可以帮助我。
我的方法如下:
让我们以您在附图中说明的示例为例:
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";
}
下一个场景是节点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 进行编码对于可重用性来说是一个好主意......
-- 谱系树 --
谱系树 可能足以满足您的需求。您可以使 in-law 的可链接,如果您点击他们的名字,图表会重新绘制,这样您就可以看到他们的血统。
-- 括号布局树 --
类似于谱系树,但是是双向的,这个括号布局树 让您可以处理“这里是我的父母、祖父母、孩子、孙子”类型的视图。像谱系树一样,您可以使个人可链接以将括号重新居中该节点上。
-- 基于力的布局 --
有一些有趣的基于力的布局似乎很有希望。看看这个带有智能标签的基于力的布局示例。对如何确定“力”的算法进行调整可以使它成为一棵非常可爱的树,老一代高于或低于新一代。
-- 聚类树状图(为什么失败) --
我见过的最适合家谱的 d3.js 布局假定单个节点是父节点,而您需要将父节点表示为两个节点之间的组合(视觉上是“T”):一个节点是您树的成员,并且是代表姻亲的一个浮动节点。调整集群树状图来做到这一点应该是可行的,但并非没有重大修改。
如果你——或其他任何人——解决这个问题,请告诉我。我希望看到这项工作(并从中受益),如果可行的话,我可能会为此做出贡献。
在具体实现方面,mj8591问这个问题是关于一个类似的家谱有不同的问题。但是,幸运的是,这个问题包括一个小提琴(所有 js 代码),它具有您需要的大部分或所有组件,并且来自 mdml 的响应包括另一个小提琴,它为每个节点添加了一些更细粒度的“可点击性”。
同样,这不是自动的,但希望这些资源足以让您有一个良好的开端!
我尝试了 dtree并喜欢它。但是,当您添加几代时,水平显示会使整体显示非常大且笨拙。相反,我使用了Reingold–Tilford 树。这棵树的一个缺点是每个节点只能有一个父节点:配偶不能并排显示:为了克服这个限制,我在发送之前调整了 JSON 以将配偶合并为一个实体(例如:“丈夫 - 妻子”)它到树上。
您可以使用dTree(基于 D3)来实现您的要求。
演示:https ://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7
3年后回答问题。
现在有一个来自 Mike 的谱系树图
https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
然后是这个 d3.tree - 家谱 https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
您也可以从 Mike https://beta.observablehq.com/@mbostock/d3-tidy-tree再次尝试 D3 Tidy Tree