如何在基於d3.js的“家庭樹”中展示婚姻？

Question

我是一名HTML / CSS開發人員，正在研究構建“家庭樹”的javascript解決方案，這種解決方案需要以有意義的方式展示婚姻 （當然來自家庭以外）。

基本上我正在考慮基於d3.js的樹形圖，例如http://bl.ocks.org/4063570 ，但我很難找到那些表達“婚姻”的東西。

下面是我將基於它的數據的圖像：

任何幫助/建議/鏈接將不勝感激！ 我只是不知道它是否可能，但是我喜歡使用d3.js，因為它看起來很精致，而且看起來很多功能。

Answer 1

有一些選擇，但我相信每一個都需要一些工作。 如果有一個單一標准用於在JSON中表示族樹，那將會有所幫助。 我最近注意到geni.com有一個非常深入的API。 也許對其API進行編碼對於可重用性是一個好主意......

- 譜系樹 -

譜系樹可能足以滿足您的需求。 你可以讓in-law成為可鏈接的，如果你點擊他們的名字，圖表會重新繪制，這樣你就可以看到他們的血統。

- 支架布局樹 -

類似於譜系樹，但是雙向，這個支架布局樹可以讓你處理“這里是我的父母，祖父母，孩子，孫子”類型的視圖。 與譜系樹一樣，您可以使個體可鏈接以重新定位該節點上的括號。

- 基於力的布局 -

有一些有趣的基於力量的布局似乎很有希望。 看一下使用智能標簽的基於力的布局示例 。 對算法如何確定“力”的調整可以使這成為一個非常可愛的樹，老一代高於或低於新一代。

- 聚類樹狀圖（為什么它失敗） -

我見過的d3.js布局最適合家庭樹，假設單個節點是父節點，而你需要將父節點表示為兩個節點之間的組合（視覺上為“T”）：一個節點是樹的成員，還有一個代表姻親的浮動節點。 調整聚類樹狀圖來做到這一點應該是可行的，但不是沒有重大修改。

如果你 - 或其他任何人 - 解決這個問題，請告訴我。 我希望看到（並從中受益）這項工作，如果可行的話，也許能夠為此做出貢獻。

Answer 2

我還需要用D3繪制血統，所以我想出了如何。 我創建了一些示例來顯示基本功能，然后添加高級功能，例如擴展和顯示后代。

我不知道你想如何展示婚姻。 婚姻是祖先血統中固有的，但不是在下降圖表中。 代碼可以適用於顯示后代節點中的配偶。

這是一張它看起來如何的照片。 可以根據需要調整樣式。

Answer 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的可能性。