13

我正在寻找一个简单的 Javascript 库（svg？），它允许我绘制家谱关系。

我在 google 上搜索了很多，发现了很多有趣的库，比如 Raphaël 及其扩展 Dracula。谷歌也有自己的库来制作流程图。

不幸的是，每个库都用一条线在节点之间建立关系。如果 A 和 B 与 C 有关系，我将获得 2 条线：一条从 A 到 C，一条从 B 到 C。

我需要的是一条从 A 到 B 的线（我们称之为 AB）和一条从 AB 到 C 的线来代表 A 和 B 的婚姻。

示例（来源：example-image）： 我的要求

谢谢。

4

6 回答 6

3

我有同样的问题。这是我发现的：

您还有其他解决方案吗？

于 2012-05-17T23:37:40.827 回答
3

我发现 3 种方法能够满足您的要求：

  1. 巴尔干图

在此处输入图像描述

参考链接：https ://balkangraph.com/OrgChartJS/Demos/RoyalFamilyTree

  1. dTree（基于 D3）

在此处输入图像描述

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

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

  1. GoJS 基因图

在此处输入图像描述

参考链接：https ://gojs.net/latest/samples/genogram.html

于 2020-08-03T02:45:56.323 回答
2

找到TreantJS - 可能会有所帮助。

于 2019-10-20T17:45:21.370 回答
1

我定制了一个Graphviz点文件来产生这样的输出。目前我正在使用Ruby脚本从 .gedcom 文件中生成它。 在此处输入图像描述

这里的 .dot 内容，带有数字的节点只是点并且以正确的方式流动边缘。

digraph G {
  graph [nodesep=0.2,splines=ortho,ranksep=0.05]
  node [shape=box,fontname=Helvetica,fontsize=8;color="green",fixedsize=true,width=1,height=0.5,style=filled]
  Grandfather [color="lightblue"]
  Grandmother [color="pink"]
  StephGrandmother [color="pink"]
  Father [color="lightblue"]
  Mother [color="pink"]
  Uncle [color="lightblue"]
  Laurent [color="lightblue"]
  Child2 [color="lightblue"]
  Child3, Child4 [color="pink"]
  node[label="", width=0, height=0];
  edge[arrowhead=none, color=blue];
  {rank=same;StephGrandmother;Grandfather;Grandmother;Grandfather1}
  {rank=same;Father;Father1;Mother;Uncle}
  {rank=same;Laurent;Child2;Child3,Child4}
  {rank=same;Father2;Father3}
  StephGrandmother:e -> Grandfather:w
  Grandfather:e -> Grandfather1
  Grandfather1 -> Grandmother:w
  Grandfather1 -> Grandfather2
  Grandfather2 -> Father:n 
  Grandfather2 -> Uncle:n
  Father:e -> Father1
  Father1 -> Mother:w
  Father1 -> Father2
  Father2:w -> Laurent:n 
  Father2:w -> Child2:n
  Father2 -> Father3
  Father3:e -> Child3:n
  Father3:e -> Child4:n
}
于 2017-01-04T23:24:02.653 回答
1

我知道我真的迟到了，但是当我看到您的示例图像是使用 yEd 创建的时，我认为链接到 yEd 所基于的底层软件库将是一个好主意。毕竟有一个JavaScript 版本的图形可视化库，它内置了一个特定的家庭树自动布局。

有一篇关于如何使用该库在 JavaScript 中绘制家庭图表的文章，所以如果这是在商业环境中（这是一个商业库），您可能想看看，因为它专门解决了连接问题（“婚姻节点”）您正在描述：

示例自动家谱布局

灰色圆形节点描绘了婚姻，子节点连接到各自父母的婚姻节点。

如果不是自动布局，当然您可能还想查看此问题中的其他库。

免责声明：我为提供链接库的公司工作，但我不代表该公司。我的评论、意见和答案是我自己的。

于 2019-12-17T10:13:21.557 回答
0

虽然不是“库”，但存在一个实用程序，可让您精确绘制您所描述的内容。简称为“SVG Utility”，这是一款带有图形设计器的免费软件，可让您定义真实的家庭关系（包括多个配偶、暂定子女等）。请参阅有关 SVG 家谱的更多信息。

一旦设计完成，关系和布局就会以简单的文本文件格式捕获，以便可以对其进行修改或重用。该实用程序生成 SVG 版本以用于博客文章或其他网页。有几种可能的配置允许在同一页面上显示多个 SVG 图像、人员框或“家庭”后面的工具提示或弹出信息、单个树的平移缩放、缩略图和标题等。

Dropbox 文件夹中提供了安装工具包、文档和示例。联系上述博客文章的作者以获取访问权限。

该实用程序设计为在 Windows 下运行，但也已在 Mac 上的 WINE 兼容层下运行。

于 2017-10-13T10:28:31.990 回答