如何在基于 d3.js 的“家谱"中显示婚姻? [英] How do I show marriages in a d3.js based 'family-tree'?
问题描述
我是一名 HTML/CSS 开发人员，正在研究用于构建家谱"的 javascript 解决方案，该家谱"需要以有意义的方式展示婚姻(当然来自家庭之外).
本质上，我正在考虑将它建立在基于 d3.js 的树状图上，例如可能足以满足您的需求.您可以将姻亲设为可链接，如果您点击他们的名字，图表将重新绘制，以便您可以看到他们的血统.
-- 括号布局树 --
类似于谱系树，但是是双向的，这个支架布局树可以让您处理这是我的父母，祖父母、孩子、孙子"类型视图.与谱系树一样，您可以使个人可链接以将括号重新居中在该节点上.
-- 基于力的布局 --
有一些有趣的基于力的布局看起来很有前景.看看这个带有智能标签的基于力的布局示例.对如何确定力"的算法进行调整可以使其成为一棵非常可爱的树，老一代在新一代之上或之下.
-- 聚类树状图(失败的原因)--
我见过的最适合家谱的 d3.js 布局假设单个节点是父节点，而您需要将父节点表示为两个节点的组合(视觉上是T"):一个节点是树的成员，一个浮动节点代表姻亲.调整聚类树状图来做到这一点应该是可行的，但并非没有重大修改.
如果你——或者其他任何人——解决了这个问题，请告诉我.我希望看到(并从中受益)这项工作，并且在可行的情况下可能会做出贡献.
I'm a HTML/CSS developer, researching javascript solutions for building a 'family-tree' which needs to show marriages (from outside the family, of course) in a meaningful way.
Essentially I'm looking at basing it upon a dendrogram, based on d3.js, e.g. http://bl.ocks.org/4063570, but I've struggled to find anything out there that expresses 'marriages'.
Below is an image of the data I will be basing it upon:
Any help / suggestions / links would be much appreciated! I just don't know if it's even possible, but would love to use d3.js as it looks so well-made, and apparently versatile.
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 Tree might 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 Tree lets 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.
这篇关于如何在基于 d3.js 的“家谱"中显示婚姻?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
