你如何在 d3.js 中创建家谱? [英] How do you create a family tree in d3.js?
问题描述
我目前正在进行一个小型家谱实验,并希望实现一个简单的家谱,如下图所示.
迄今为止最好的搜索结果只产生了一个子节点只能有一个父节点的例子.但我需要的是能够在实体之间(从父亲到母亲)以及节点和其他链接(从孩子到父母链接)之间创建链接.目前我没有固定的数据架构.
我为此选择了
在上面的示例中,我使用了节点名称 A/B/C...但您可以根据需要更改它.您需要将文本居中.
我在代码中添加了注释以帮助您理解流程.以防万一您有任何不清楚的地方,请发表评论,我很乐意澄清.
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.js for 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.
I hope someone can help me with this.
My approach is as under:
Lets take the example you have illustrated in the attached figure:
Jenny Of Oldstones is also a the child of Aegon V but the difference between this child and other children of Aegon V is that in this case I am not drawing the link between it.
This is done by setting the node as no_parent: true in the node JSON example:
//Here Q will not have a parent
{
name: "Q",
id: 16,
no_parent: true
}
In the code check the _elbow
function_ this does the job of not drawing the line between it and its parent:
if (d.target.no_parent) {
return "M0,0L0,0";
}
Next scenario is the link going between Node Aerys II and Rahella this node has its set of children.
- I have created a node between them which is marked as
hidden: true,
- I make the
display:none
for such node. It appears that the children are coming from the line between node Aerys II and Rahella
JSON Example:
//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/
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.
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.
这篇关于你如何在 d3.js 中创建家谱?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!