मैं d3.js आधारित 'परिवार-पेड़' में विवाह कैसे दिखा सकता हूं?

Question

मैं एक HTML/CSS डेवलपर हूं, जो 'परिवार-पेड़' बनाने के लिए जावास्क्रिप्ट समाधान का शोध कर रहा है, जो को सार्थक तरीके से विवाह (परिवार के बाहर से) दिखाने की ज़रूरत है।

अनिवार्य रूप से मैं इसे d3.js पर आधारित डेंडरोग्राम पर आधारित करने के लिए देख रहा हूं, उदा। http://bl.ocks.org/4063570, लेकिन मैंने वहां कुछ भी खोजने के लिए संघर्ष किया है जो 'विवाह' व्यक्त करता है।

कोई मदद/सुझाव/लिंक बहुत सराहना की जाएगी:

नीचे डेटा मैं पर यह आधारित हो जाएगा की एक छवि है! मुझे नहीं पता कि यह भी संभव है, लेकिन d3.js का उपयोग करना अच्छा लगेगा क्योंकि यह बहुत अच्छी तरह से बनाया गया है, और स्पष्ट रूप से बहुमुखी है।

Answer 1

कुछ विकल्प हैं, लेकिन मेरा मानना ​​है कि प्रत्येक को थोड़ा सा काम करने की आवश्यकता होगी। JSON में पारिवारिक पेड़ का प्रतिनिधित्व करने के लिए एक एकल मानक होने पर यह मदद करेगा। मैंने हाल ही में देखा है कि geni.com के लिए इसके लिए काफी गहराई से एपीआई है। शायद उनके एपीआई के खिलाफ कोडिंग पुनर्प्रयोग के लिए एक अच्छा विचार होगा ...

- वंशावली पेड़ -

The Pedigree Tree आपकी ज़रूरतें पूरी हो सकती है। आप ससुराल के लिंक करने योग्य बना देंगे, जहां आपने उनके नाम पर क्लिक किया था तो ग्राफ फिर से खींचा जाएगा ताकि आप उनकी वंशावली देख सकें।

- ब्रैकेट लेआउट ट्री -

वंशावली पेड़ की तरह, लेकिन द्विदिश, इस Bracket Layout Tree आप को संभाल एक "यहाँ मेरे माता-पिता, दादा-दादी, बच्चों, पोते हैं" प्रकार देखने की सुविधा देता है। वंशावली वृक्ष की तरह, आप व्यक्तियों को उस नोड पर ब्रैकेट को फिर से केंद्रित करने के लिए लिंक करने योग्य बना देंगे।

- बल आधारित लेआउट -

कुछ रोचक बल आधारित लेआउट होनहार लग रहे हैं। this example of a force-based layout with smart labels पर एक नज़र डालें। "बल" को कैसे निर्धारित किया जाता है, इसके लिए एल्गोरिदम के लिए समायोजन इसे एक बहुत प्यारे पेड़ में बना सकता है, पुरानी पीढ़ियों के साथ ऊपर या नीचे।

- क्लस्टर Dendogram (कारण है कि यह विफल रहता है) -

d3.js लेआउट मैंने देखा है कि खुद परिवार के पेड़ के लिए सबसे अच्छा उधार हैं, मान लें कि एक नोड माता पिता है, जबकि आप का प्रतिनिधित्व करने की जरूरत है माता-पिता के संयोजन के रूप में (दृश्यमान रूप से "टी" के बीच दो नोड्स: एक नोड जो आपके पेड़ का सदस्य होता है, और एक फ़्लोटिंग नोड जो ससुराल का प्रतिनिधित्व करता है। ऐसा करने के लिए क्लस्टर डेंडोग्राम को समायोजित करना व्यवहार्य होना चाहिए लेकिन महत्वपूर्ण संशोधन के बिना नहीं।

यदि आप - या उस मामले के लिए कोई और - इससे निपटें, मुझे बताएं। मैं काम (और लाभ) से देखना चाहता हूं और यदि संभव हो तो इसमें योगदान करने में सक्षम हो सकता है।

Answer 2

मुझे डी 3 के साथ वंशावली खींचने की भी आवश्यकता है, इसलिए मुझे पता चला कि कैसे। मेरे पास created examples है जो मूल कार्यक्षमता दिखाता है और फिर उन्नत सुविधाओं जैसे कि विस्तार और दर्शकों को दिखाता है।

मुझे नहीं पता कि आप विवाह कैसे प्रदर्शित करना चाहते हैं। विवाह एक पैतृक वंशावली में निहित हैं लेकिन एक वंश चार्ट में नहीं। कोड को वंशज नोड्स में पति/पत्नी दिखाने के लिए अनुकूलित किया जा सकता है।

यहां यह एक तस्वीर है कि यह कैसा दिखता है। वांछित के रूप में शैली tweaked किया जा सकता है।

Answer 3

यह कुछ काम करने की जरूरत है, लेकिन अनिवार्य रूप से विचार मेरा प्रस्ताव है नोड कहा जाता रिश्ते की एक विशेष प्रकार का है कि एक चक्र आकर्षित नहीं है के साथ एक बल लेआउट करते हैं। यह दो विषयों के बीच बांध का प्रतिनिधित्व करता है और अधिक नोड्स के माता-पिता हो सकता है।

डी 3 में आप जो भी चाहते हैं उसे फिट करने के लिए सभी डेटा संरचनाओं का विस्तार कर सकते हैं, फिर डेटा को बांधने के लिए और अधिक काम है लेकिन यह सभी अनुकूलन योग्य है। यहां डेटा संरचनाओं का एक नमूना है जो मैं बल लेआउट में उपयोग करूंगा।

{ 
    "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 
    } 
    ] 
} 

आशा है कि मैंने डी 3 की संभावनाओं के बारे में कुछ स्पष्ट किया है।