65

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

到目前为止,最好的搜索结果只产生了一个子节点只能有一个父节点的例子。但我需要的是在实体之间创建链接(从父亲到母亲)以及在节点和其他链接之间创建链接(从孩子到父亲-母亲链接)的能力。目前我没有固定的数据模式。

我为此选择了 d3.js因为它看起来可以胜任这项工作。我只是不知道如何开始,甚至不知道从哪里开始。有关 d3.js 的教程仅涵盖条形图等标准图表。

我希望有人可以帮助我。

结果应该是这样的

4

7 回答 7

48

我的方法如下:

让我们以您在附图中说明的示例为例:

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
 }

在代码中检查_elbowfunction_ 这不会在它和它的父级之间画线:

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...,但您可以根据需要更改它。您需要将文本居中。

我在代码中添加了注释以帮助您理解流程。万一您对任何一点不清楚,请发表评论,我很乐意澄清。

于 2015-07-12T12:17:59.670 回答
19

dTree是一个建立在 D3 之上的开源库,用于创建家族树(或类似的分层图)。

它处理手动生成 D3 图的麻烦部分,并使用简单的 json 数据格式:

[{
  name: "Father",
  marriages: [{
    spouse: {
      name: "Mother",
    },
    children: [{
      name: "Child",
    }]
  }]
}]

如果您有兴趣修改它,它支持节点渲染和事件处理程序的回调。最后,该库截至 2016 年正在开发中,欢迎提出拉取请求。

免责声明:我是 dTree 的作者。我像你一样在网上搜索后创建了图书馆,但没有找到任何我喜欢的东西。

于 2016-03-10T19:42:59.537 回答
9

不太好的消息:我所做的研究表明,没有开箱即用的 d3 库可以直接完成此任务而无需进行一些定制。

消息:其他一些人对此进行了研究并找到了一些很好的起点我意识到这不是手头整个任务的完整解决方案,但是从您的问题看来,到目前为止,您的大部分困难只是弄清楚从哪里开始(例如“关于 d3.js 的教程仅涵盖标准条形图之类的图表。”)。在没有更好的情况下,我至少会在这里回应那部分。

首先,在几年前对这个相关的 stackoverflow 帖子的回应中,inanutshellus 提供了一些很棒的 d3 工具,这些工具可以在这里使用。通过一些轻量级的定制/扩展,它们应该能够让您相对快速地到达目的地。为了后代,这里转载了inanutshellus的答案:

有一些选择,但我相信每个都需要一些工作。如果有一个单一的标准来表示 JSON 中的家谱,那将会有所帮助。我最近注意到 geni.com 对此有一个相当深入的 API。也许针对他们的 API 进行编码对于可重用性来说是一个好主意......

-- 谱系树 --

谱系树 可能足以满足您的需求。您可以使 in-law 的可链接,如果您点击他们的名字,图表会重新绘制,这样您就可以看到他们的血统。

-- 括号布局树 --

类似于谱系树,但是是双向的,这个括号布局树 让您可以处理“这里是我的父母、祖父母、孩子、孙子”类型的视图。像谱系树一样,您可以使个人可链接以将括号重新居中该节点上。

-- 基于力的布局 --

有一些有趣的基于力的布局似乎很有希望。看看这个带有智能标签的基于力的布局示例。对如何确定“力”的算法进行调整可以使它成为一棵非常可爱的树,老一代高于或低于新一代。

-- 聚类树状图(为什么失败) --

我见过的最适合家谱的 d3.js 布局假定单个节点是父节点,而您需要将父节点表示为两个节点之间的组合(视觉上是“T”):一个节点是您树的成员,并且是代表姻亲的一个浮动节点。调整集群树状图来做到这一点应该是可行的,但并非没有重大修改。

如果你——或其他任何人——解决这个问题,请告诉我。我希望看到这项工作(并从中受益),如果可行的话,我可能会为此做出贡献。

在具体实现方面,mj8591问这个问题是关于一个类似的家谱有不同的问题。但是,幸运的是,这个问题包括一个小提琴(所有 js 代码),它具有您需要的大部分或所有组件,并且来自 mdml 的响应包括另一个小提琴,它为每个节点添加了一些更细粒度的“可点击性”。

同样,这不是自动的,但希望这些资源足以让您有一个良好的开端!

于 2015-07-09T15:36:54.500 回答
4

我尝试了 dtree并喜欢它。但是,当您添加几代时,水平显示会使整体显示非常大且笨拙。相反,我使用了Reingold–Tilford 树。这棵树的一个缺点是每个节点只能有一个父节点:配偶不能并排显示:为了克服这个限制,我在发送之前调整了 JSON 以将配偶合并为一个实体(例如:“丈夫 - 妻子”)它到树上。

于 2016-07-02T18:17:52.807 回答
1

您可以使用dTree(基于 D3)来实现您的要求。

在此处输入图像描述

演示:https ://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7

参考链接:https ://github.com/ErikGartner/dTree

于 2020-08-04T15:31:13.320 回答
1

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

于 2018-11-18T13:58:08.703 回答
0

我不知道这是否对您有任何帮助,因为您说您将使用 d3.js,但是您可能希望使用另一个工具,称为 jsplumb。它似乎非常适合这种项目:主页。他们也有一些不错的教程。还有一种更像文档另一种更具交互性

就像我说的,如果现在切换技术还不算太晚,这可能值得一试。都是 html、css 和 javascript,所以它不应该是一个苛刻的过渡。

于 2015-07-10T15:39:12.247 回答