你如何在d3.js中创建一个家谱？

Question

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

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

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

我希望有人可以帮助我.

Answer 1

我的方法如下:

让我们举一个你在附图中说明的例子:

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";
}

下一个场景是Node 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 ...但您可以根据您的要求进行更改.您需要将文本居中.

我在代码中添加了注释,以帮助您了解流程.如果你不清楚任何一点,请评论我会很乐意澄清.

Answer 2

dTree是一个构建在D3之上的开源库,它创建了族树(或类似的层次图).

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

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

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

免责声明:我是dTree的作者.我像你一样搜索网页后创建了这个库,没有找到我喜欢的东西.

Answer 3

不那么好的消息:我所做的研究表明,没有开箱即用的d3库可以在没有定制的情况下直接实现这一点.

的好消息:已经有谁已经研究过这和发现了一些很好的出发点,其他一些人!我意识到这不是手头整个任务的完整解决方案,但从你的问题看来,到目前为止你的很大一部分困难只是想弄清楚从哪里开始(例如"关于d3.js的教程仅涵盖标准图表,如条形图.").在没有任何更好的情况下,我至少会回应这一部分.

首先,在应对本次关联计算器后,从几年前,inanutshellus提供了一些伟大的D3工具是可用的和可利用的在这里.通过一些轻松的定制/扩展,他们应该能够相对快速地到达您的目的地.对于后代,inanutshellus的答案在此复制:

有一些选择,但我相信每一个都需要一些工作.如果有一个单一标准用于在JSON中表示族树,那将会有所帮助.我最近注意到geni.com有一个非常深入的API.也许对其API进行编码对于可重用性是一个好主意......

- 谱系树 -

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

- 支架布局树 -

类似于谱系树,但是双向,这个支架布局树 可以让你处理"这里是我的父母,祖父母,孩子,孙子"类型的视图.与谱系树一样,您可以使个体可链接以重新定位该节点上的括号.

- 基于力的布局 -

有一些有趣的基于力量的布局似乎很有希望.看一下使用智能标签的基于力的布局示例.对算法如何确定"力"的调整可以使这成为一个非常可爱的树,老一代高于或低于新一代.

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

我见过的d3.js布局最适合家庭树,假设单个节点是父节点,而你需要将父节点表示为两个节点之间的组合(视觉上为"T"):一个节点是树的成员,还有一个代表姻亲的浮动节点.调整聚类树状图来做到这一点应该是可行的,但不是没有重大修改.

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

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

再说一次,它并不是自动化的,但希望这些资源足以让你有一个好的开始!