如何在基于 d3.js 的“家谱”中显示婚姻？

Posted 2023-02-22

【中文标题】如何在基于 d3.js 的“家谱”中显示婚姻？

【英文标题】：How do I show marriages in a d3.js based 'family-tree'?

【发布时间】：2012-11-25 15:31:43

【问题描述】：

我是一名 html/CSS 开发人员，正在研究用于构建“家谱”的 javascript 解决方案，该“家谱”需要以有意义的方式显示婚姻（当然来自家庭之外）。

基本上我正在研究基于 d3.js 的树状图，例如http://bl.ocks.org/4063570，但我一直在努力寻找任何表达“婚姻”的东西。

下面是我将基于的数据的图像：

任何帮助/建议/链接将不胜感激！我只是不知道这是否可能，但我很想使用 d3.js，因为它看起来制作精良，而且显然用途广泛。

【问题讨论】：

一方面你有人，他们可以表示为图中的节点（框）。然后你有连接线；我假设有不同的种类，因此您可以将它们添加到自己的类中。要实现这一点，您需要使用 svg:path 元素。我看到的唯一障碍是您必须编写自己的布局算法。

你有没有想出一个好的解决方案？我也想做同样的事情。

对于这个问题的解决方案看起来也很疯狂......

【参考方案1】：

有一些选项，但我相信每个选项都需要一些工作。如果有一个单一的标准来表示 JSON 中的家谱，那将会有所帮助。我最近注意到 geni.com 对此有一个相当深入的 API。也许针对他们的 API 进行编码对于可重用性来说是一个好主意......

-- 谱系树--

The Pedigree Tree 可能足以满足您的需求。您可以将 in-law 设为可链接，如果您点击他们的名字，图表会重新绘制，这样您就可以看到他们的血统。

-- 括号布局树--

类似于谱系树，但是是双向的，Bracket Layout Tree 让您可以处理“这里是我的父母、祖父母、孩子、孙子”类型的视图。与谱系树一样，您可以使个体可链接，以便在该节点上重新居中括号。

-- 基于力的布局--

有一些有趣的基于力的布局看起来很有希望。看看this example of a force-based layout with smart labels。对如何确定“力”的算法进行调整可以使它成为一棵非常可爱的树，老一代高于或低于新一代。

-- 聚类树状图（失败的原因）--

我见过的最适合家谱的 d3.js 布局假定单个节点是父节点，而您需要将父节点表示为两个节点的组合（视觉上是“T”之间的）：一个节点是树的成员，一个浮动节点代表姻亲。调整聚类树状图来做到这一点应该是可行的，但并非没有重大修改。

如果您 - 或其他任何人 - 解决这个问题，请告诉我。我希望看到这项工作（并从中受益），如果可行的话，我可能会为此做出贡献。

【参考方案2】：

我还需要用 D3 绘制血统书，所以我想出了办法。我有 created examples 显示基本功能，然后添加高级功能，例如扩展和显示后代。

我不知道你想如何展示婚姻。婚姻是祖先谱系中固有的，而不是后代图谱中固有的。该代码可以修改为在后代节点中显示配偶。

这是它的外观图片。可以根据需要调整样式。

【参考方案3】：

这需要一些工作，但基本上我提出的想法是使用一种称为关系的特殊节点进行强制布局，该节点不画圆。它代表两个主体之间的绑定，可以是更多节点的父节点。

在 d3 中，您可以扩展所有数据结构以适应您的需求，然后还有更多工作来绑定数据，但它都是可定制的。这是我将在力布局中使用的数据结构示例。

  "nodes": [
    
      "type": "root",
      "x": 300,
      "y": 300,
      "fixed": true
    ,
    
      "type": "male",
      "name": "grandpa"
    ,
    
      "type": "female",
      "name": "grandma"
    ,
    
      "type": "relationship"
    ,
    
      "type": "male",
      "name": "dad"
    ,
    
      "type": "female",
      "name": "mum"
    ,
    
      "type": "relationship"
    ,
    
      "type": "male",
      "name": "I"
    
  ],
  "links": [
    
      "source": 0,
      "target": 2
    ,
    
      "source": 1,
      "target": 2
    ,
    
      "source": 0,
      "target": 3
    ,
    
      "source": 3,
      "target": 4
    ,
    
      "source": 4,
      "target": 6
    ,
    
      "source": 5,
      "target": 6
    ,
    
      "source": 6,
      "target": 7
    
  ]

希望我能澄清一些关于 d3 的可能性。