如何在基於d3.js的「家庭樹」中顯示婚姻？

我是一名HTML/CSS開發人員，研究javascript解決方案以構建「家庭樹」，其中需要以有意義的方式顯示結婚（當然是來自家庭外部）。如何在基於d3.js的「家庭樹」中顯示婚姻？

本質上，我正在考慮基於d3.js的樹狀圖。 http://bl.ocks.org/4063570，但我一直在努力尋找表達「婚姻」的東西。

下面是我，就會被其基礎數據的圖像：

here's my data

任何幫助/建議/鏈接，將不勝感激！我只是不知道它是否可能，但是會喜歡使用d3.js，因爲它看起來非常好，而且顯然是多功能的。

來源

2012-12-07 byzantine cucumber

一方面你有人，可以表示爲圖中的節點（框）。然後你有連接線;我假設有不同的類型，所以你可以添加他們自己的類。要實現你需要使用svg：path元素。我看到的唯一障礙是您必須編寫自己的佈局算法。 – Dan

你有沒有想出一個很好的解決方案呢？我期待着做同樣的事情。 – dkniffin

簡短的答案 - 不！ –

有一些選擇，但我相信每個都需要一點工作。如果在JSON中有一個用於表示家譜的單一標準，這將有所幫助。我最近注意到geni.com有一個非常深入的API。也許編碼對他們的API將是可重用性好主意......

- 譜系樹 -

The Pedigree Tree可能足以滿足您的需求。你會讓姻親的鏈接，如果你點擊他們的名字，圖表會重新繪製，這樣你就可以看到他們的血統。

- 支架佈局樹 -

類似的譜系樹，而是雙向的，這Bracket Layout Tree，您可以處理一個「這裏是我的父母，祖父母，子女，孫子女」類型視圖。就像譜系樹一樣，你可以讓個體鏈接來重新定位該節點上的括號。

- 基於力佈局 -

還有一些有趣的基於力的佈局似乎有希望。看看this example of a force-based layout with smart labels。對如何確定「力量」的算法進行調整可以使其成爲一棵非常可愛的樹，其中較老的一代高於或低於較新的一代。

- 集羣樹狀圖（失敗的原因） -

我見過的最能借給自己家譜的d3.js佈局假設一個節點是父，而你需要代表父母作爲兩個節點（兩個節點之間的可視「T」）的組合：一個節點是樹的成員，另一個節點表示姻親。調整聚類樹狀圖以做到這一點應該是可行的，但不是沒有重大修改。

如果您 - 或者其他任何人 - 解決這個問題，請告訴我。我希望看到（並從中受益）這項工作，並在可行的情況下爲其作出貢獻。

來源

2013-02-22 20:37:19 inanutshellus

我還需要用D3繪製血統書，所以我想出瞭如何。我有created examples顯示基本功能，然後添加高級功能，如展開和顯示後代。

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

下面是它的外觀照片。風格可以根據需要調整。

enter image description here

來源

2015-06-04 15:35:59

這需要一些工作，但本質上我提出的想法是盡了力的佈局，一種特殊的節點稱爲關係不畫一個圓。它表示兩個主題之間的綁定，可以是更多節點的父節點。

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

來源

2015-06-19 10:16:02

如何在基於d3.js的「家庭樹」中顯示婚姻？

回答

相關問題