Javascript 你如何在 d3.js 中创建家谱？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31245751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you create a family tree in d3.js?
提问by
I'm currently working on a small genealogy experiment and would like to implement a simple family tree like in the picture below.
我目前正在进行一个小型家谱实验，并希望实现一个简单的家谱，如下图所示。
The best search results so far for this only yielded examples where a child can only have a parent node. But what I need is the ability to create links between entities (from father to mother) and links between nodes and other links (from child to the father-mother link). Currently I don't have a fixed data schema for this.
迄今为止最好的搜索结果只产生了一个子节点只能有一个父节点的例子。但我需要的是能够在实体之间（从父亲到母亲）以及节点和其他链接（从孩子到父母链接）之间创建链接。目前我没有固定的数据模式。
I've chosen d3.jsfor this because it looks like would be capable of doing the job. I just don't know how or even where to start. Tutorials about d3.js only cover standard charts like bar charts.
我为此选择了d3.js，因为它看起来能够胜任这项工作。我只是不知道如何开始，甚至不知道从哪里开始。关于 d3.js 的教程仅涵盖标准图表，如条形图。
I hope someone can help me with this.
我希望有人能帮我解决这个问题。
采纳答案by Cyril Cherian
My approach is as under:
我的方法如下：
Lets take the example you have illustrated in the attached figure:
让我们以您在附图中说明的示例为例：
Jenny Of Oldstonesis also a the child of Aegon Vbut the difference between this child and other children of Aegon V is that in this case I am not drawing the link between it.
Jenny Of Oldstones也是Aegon V的孩子，但这个孩子与 Aegon V 的其他孩子之间的区别在于，在这种情况下，我没有画出它之间的联系。
This is done by setting the node as no_parent: truein the node JSON example:
这是通过在节点 JSON 示例中将节点设置为no_parent: true来完成的：
//Here Q will not have a parent
{
name: "Q",
id: 16,
no_parent: true
}
In the code check the _elbowfunction_ this does the job of not drawing the line between it and its parent:
在代码中检查_elbowfunction_ 这做了不画它和它的父之间的线的工作：
if (d.target.no_parent) {
return "M0,0L0,0";
}
Next scenario is the link going between Node Aerys II and Rahellathis node has its set of children.
下一个场景是节点Aerys II 和 Rahella之间的链接，该节点有其子节点集。
- I have created a node between them which is marked as
hidden: true, - I make the
display:nonefor such node. It appears that the children are coming from the line between node Aerys II and Rahella
- 我在它们之间创建了一个节点，标记为
hidden: true, - 我
display:none为这样的节点制作了。看起来孩子们来自节点Aerys II 和 Rahella之间的线
JSON Example:
JSON 示例：
//this node will not be displayed
{ name: "",
id: 2,
no_parent: true,
hidden: true,
children: [....]
}
In the code check the place where I make the rectangles, the code below hides the node:
在代码中检查我制作矩形的地方，下面的代码隐藏了节点：
.attr("display", function (d) {
if (d.hidden) {
return "none"
} else {
return ""
};
})
Full code is in here: http://jsfiddle.net/cyril123/0vbtvoon/22/
完整代码在这里：http: //jsfiddle.net/cyril123/0vbtvoon/22/
In the example above, I have made the use of node names A/B/C... but you can change it as per you requirements. You will need to center the text.
在上面的示例中，我使用了节点名称 A/B/C...但您可以根据需要更改它。您需要将文本居中。
I have added comments to the code to help you understand the flow. Just in case you are not clear on any point please comment I ll be happy to clarify.
我在代码中添加了注释以帮助您理解流程。以防万一您有任何不清楚的地方，请发表评论，我很乐意澄清。
回答by Erik
dTreeis an open source library built on-top of D3 that creates family trees (or similar hierarchical graphs).
dTree是一个建立在 D3 之上的开源库，用于创建家谱（或类似的分层图）。
It handles the bothersome parts of generating the D3 graph manually and uses a simple json data format:
它处理手动生成 D3 图的麻烦部分，并使用简单的 json 数据格式：
[{
name: "Father",
marriages: [{
spouse: {
name: "Mother",
},
children: [{
name: "Child",
}]
}]
}]
If you are interested in modifying it supports callback for node rendering and event handler. Finally the library is as of 2016 under development and pull requests are welcomed.
如果您有兴趣修改它，它支持节点渲染和事件处理程序的回调。最后，该库截至 2016 年正在开发中，欢迎请求请求。
DISCLAIMER: I'm the author of dTree. I created the library after searching the web just like you did and not finding anything to my liking.
免责声明：我是 dTree 的作者。我像你一样在网上搜索后创建了这个库，但没有找到我喜欢的任何东西。
回答by matt
The not-as-good news:The research I have done shows that there is no out-of-the-box d3 library that directly accomplishes this without some customization.
不太好的消息：我所做的研究表明，没有开箱即用的 d3 库可以直接实现这一点，而无需进行一些自定义。
The goodnews:There have been some other people who have looked into this and have found some great starting points! I realize that this is not a complete solution to the entire task at hand, but it seems from your question that a large portion of your difficulty so far has been simply figuring out where to start (e.g. "Tutorials about d3.js only cover standard charts like bar charts."). In the absence of anything better, I will at least respond to that portion here.
的好消息：已经有谁已经研究过这和发现了一些很好的出发点，其他一些人！我意识到这不是手头整个任务的完整解决方案，但从您的问题看来，到目前为止您的大部分困难只是弄清楚从哪里开始（例如“关于 d3.js 的教程仅涵盖标准像条形图这样的图表。”）。在没有更好的情况下，我至少会在这里回应那部分。
First, in the response to this related stackoverflow postfrom a few years back, inanutshellus provides some great d3 tools that areavailable and could be of use here. With some light customization/extension, they should be able to get you where you're going relatively quickly. For posterity, inanutshellus's answer is reproduced here:
首先，为了响应几年前这篇相关的 stackoverflow 帖子，inanutshellus 提供了一些很棒的 d3 工具，这些工具可以在这里使用。通过一些轻量级的定制/扩展，它们应该能够让您相对较快地到达目的地。对于后人，inanutshellus 的回答在这里转载：
There are some options, but I believe each would require a bit of work. It would help if there were one single standard for representing a family tree in JSON. I've recently noticed that geni.com has a quite in-depth API for this. Perhaps coding against their API would be a good idea for reusability...
-- Pedigree tree --
The Pedigree Treemight be sufficient for your needs. You'd make in-law's linkable, where if you clicked on their name the graph would redraw so you could see their lineage.
-- Bracket Layout Tree --
Similar to the Pedigree Tree, but bidirectional, this Bracket Layout Treelets you handle a "here are my parents, grandparents, children, grandchildren" type view. Like the Pedigree Tree, you'd make individuals linkable to re-center the bracket on that node.
-- Force-Based Layout --
There are some interesting force-based layouts that seem promising. Take a look at this example of a force-based layout with smart labels. An adjustment to the algorithm for how the "force" is determined could make this into a very lovely tree, with older generations above or below newer ones.
-- Cluster Dendogram (why it fails) --
The d3.js layouts I've seen that would lend themselves best to family trees assume a single node is the parent, whereas you need to represent the parent as the combination of (visually a "T" between) two nodes: one node that is a member of your tree, and one floating node that represents the in-law. Adjusting a cluster dendogram to do this should be feasible but not without significant modification.
If you--or anyone else for that matter--tackle this, let me know. I'd like to see (and benefit from) the work and may be able to contribute to it if feasible.
有一些选择，但我相信每个选择都需要一些工作。如果有一个单一的标准来表示 JSON 中的家谱，那将会有所帮助。我最近注意到 geni.com 有一个非常深入的 API。也许针对他们的 API 进行编码对于可重用性来说是一个好主意......
-- 谱系树 --
谱系树可能足以满足您的需求。您可以使姻亲的可链接，如果您单击他们的名字，图表将重新绘制，以便您可以看到他们的血统。
-- 支架布局树 --
类似于谱系树，但是是双向的，这个Bracket Layout Tree允许您处理“这是我的父母、祖父母、孩子、孙子”类型的视图。与谱系树一样，您可以使个人可链接以将括号重新居中在该节点上。
-- 基于力的布局 --
有一些有趣的基于力的布局看起来很有希望。看看这个带有智能标签的基于力的布局示例。对如何确定“力”的算法进行调整可以使其成为一棵非常可爱的树，老一代在新一代之上或之下。
-- 聚类树状图（失败的原因）-
我见过的最适合家谱的 d3.js 布局假设单个节点是父节点，而您需要将父节点表示为两个节点之间的组合（视觉上是“T”）：一个节点是你的树的一个成员，一个代表姻亲的浮动节点。调整集群树状图来做到这一点应该是可行的，但并非没有重大修改。
如果您 - 或其他任何人 - 解决这个问题，请告诉我。我希望看到（并从中受益）这项工作，并且在可行的情况下可能会做出贡献。
In terms of concrete implementation, mj8591 asked this questionregarding a similar family tree with a different problem. However, luckily for you that question includes a fiddle (all the js code) that has most or all the components that you need, and the response from mdmlincludes another fiddle that adds some more granular "clickability" to each node.
在具体实现方面，mj8591针对一个相似的家谱，不同的问题提出了这个问题。但是，幸运的是，该问题包含一个 fiddle（所有 js 代码），其中包含您需要的大部分或所有组件，并且来自 mdml的响应包括另一个 fiddle，它为每个节点添加了一些更精细的“可点击性”。
Again, it's nothing automagic but hopefully these resources are enough to get you a great start!
同样，这不是自动的，但希望这些资源足以让您有一个良好的开端！
回答by Vivek Kodira
I tried dtreeand liked it. However, when you add several generations, the horizontal display can make the overall display very large and unwieldy. Instead, I used the Reingold–Tilford Tree. One disadvantage of this tree is each node can have only one parent: spouses cannot be displayed alongside each other: To get past this limitation, I tweaked the JSON to combine spouses into one entity (ex: "husband - wife" ) just before sending it to the tree.
我试过dtree并喜欢它。但是，当您添加几代时，横向显示会使整体显示非常大且笨拙。相反，我使用了Reingold-Tilford 树。这棵树的一个缺点是每个节点只能有一个父节点：配偶不能并排显示：为了克服这个限制，我在发送之前调整了 JSON 以将配偶合并为一个实体（例如：“丈夫 - 妻子”）它到树上。
回答by kiranvj
Answering 3 years after the question.
3年后回答问题。
There is now a Pedigree Tree graph from Mike
现在有一个来自 Mike 的谱系树图
https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
Then there is this d3.tree - A Family Tree https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
然后是这个 d3.tree - 家谱 https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
You can also try the D3 Tidy Tree again from Mike https://beta.observablehq.com/@mbostock/d3-tidy-tree
您也可以从 Mike https://beta.observablehq.com/@mbostock/d3-tidy-tree再次尝试 D3 Tidy Tree
回答by TheHuman Wall
I don't know if this is of any help to you, because you said that you were going to use d3.js but there is another tool that you might want to look into using called jsplumb. It seems perfect for this kind of project: home page. They also have some decent tutorials. There is one more like docs, and another more interactive.
我不知道这是否对您有帮助，因为您说过要使用 d3.js，但您可能想研究使用另一个名为 jsplumb 的工具。它似乎非常适合这种项目：主页。他们也有一些不错的教程。有一个更像文档，另一个更具交互性。
Like I said, if it's not too late to switch technologies, this might be worth trying. It's all html, css, and javascript, so it shouldn't be a harsh transition.
就像我说的，如果现在切换技术还不算晚，这可能值得一试。全部是 html、css 和 javascript，所以它不应该是一个苛刻的过渡。
