डी 3 जेएस हाइरार्किकल एज बंडल डेटा प्रारूप

Question

मैं पदानुक्रमित किनारे बंडल का उपयोग करके targetURL पर यूआरएल को देखने की कोशिश कर रहा हूं। इन कॉलम के बीच किस तरह के संबंध की आवश्यकता है?

यहाँ the sample है:

यहाँ मेरी code है।

मैं

TypeError: node.parent.children is undefined 

Answer 1

Bundle Layout के लिये दस्तावेज में बताया गया है के रूप में एक त्रुटि हो रही है, लेआउट लिंक, जिनमें से प्रत्येक एक source और target संपत्ति की ओर इशारा करते है की एक सरणी के लिए लागू किया जाता है लिंक के दो सिरों पर नोड्स। इसके अलावा, इन दो नोड्स को प्रत्येक को parent विशेषता की आवश्यकता होती है जो पदानुक्रम में पैरेंट नोड को इंगित करता है।

यह डेटा (आदर्श) Cluster Layout से आ रहा है, जो लिंक को बंडल करने से पहले नोड्स को स्थान देता है। क्लस्टर लेआउट बंडल लेआउट द्वारा आवश्यक डेटा का उत्पादन करेगा (cluster.nodes फ़ंक्शन रिटर्न नोड्स केवल parent संपत्ति से अधिक और cluster.linkssource और target के साथ लिंक देता है)। इसका मतलब है कि आपको क्लस्टर लेआउट को खुश करने की ज़रूरत है और आप ठीक होंगे।

लिखित रूप में आपके कोड के साथ कुछ समस्याएं हैं। आम तौर पर, एक उदाहरण से कॉपी-पेस्ट किए गए विज़ुअलाइज़ेशन को फिट करने के लिए अपने डेटा को संशोधित करने के बजाय, आपके पास मौजूद डेटा के प्रारूप का उपयोग करने के लिए विभिन्न डी 3 एक्सेसर्स को अपडेट करना बेहतर अभ्यास है। यही कारण है कि वे वहाँ हैं।

आपके द्वारा कॉपी की गई विज़ुअलाइज़ेशन इसके डेटा क्लीनअप में अधिक सुसंगत है, इसलिए आपने वहां कुछ समस्याएं पेश की हैं। हम बस उनके चारों ओर काम करेंगे, लेकिन आपको शायद इसे सही समय पर कुछ समय बिताना चाहिए। पहला मुद्दा वह त्रुटि है जिसे आपने नोट किया: TypeError: node.parent.children is undefined। ऐसा इसलिए है क्योंकि आप find में 1483 लाइन प्राप्त कर रहे हैं और एक ऐसे बच्चे को जोड़ने की कोशिश कर रहे हैं जो मौजूद नहीं है।

if (typeof d.children === 'undefined') { 
    d.children = [] 
} 

इसके अलावा, आप के साथ एक रूट नोड जोड़ रहे हैं: हम इस के लिए एक विशेष जांच (हालांकि, के रूप में उल्लेख किया है, आप वास्तव में सिर्फ साफ करना चाहिए कि यह कैसे नियंत्रित किया जाता है) जोड़कर यहाँ के माध्यम से आगे बढ़ें और बस बिजली कर सकते हैं खाली स्ट्रिंग का नाम। ऐसा इसलिए है क्योंकि 1481 लाइन पर आप सबस्ट्रिंग की लंबाई के बावजूद find पर कॉल करते हैं। lastIndexOf पर कॉल के वापसी मूल्य की जांच करके आप जान लेंगे कि नोड के माता-पिता हैं या नहीं, और बाद के मामले में, parent से null (the documentation राज्यों, अभिभावक - मूल नोड, या रूट के लिए शून्य)।

एक बार जब हम इन मुद्दों को दूर कर लेंगे, तो आप TypeError: n is undefined देखना शुरू कर देंगे। ऐसा इसलिए है क्योंकि आपका डेटा अधूरा है: आपके पास नोड्स के संदर्भ हैं जो मौजूद नहीं हैं, इसलिए लाइन 1510 पर आप एक लिंक जोड़ते हैं जिसमें target प्रॉपर्टी नहीं है, इसलिए जब आप लिंक को बंडल करने का प्रयास करते हैं तो लेआउट विफल हो जाता है। इस समय को नोड्स के लिंक जोड़कर उस समय अनदेखा किया जा सकता है, लेकिन फिर भी, आपको इसे वास्तव में इसे ठीक करने के बजाय इसे ठीक करना चाहिए।

if (i in map) { 
    imports.push({ source: map[d.name], target: map[i] }); 
} 

लंबी और यह की कमी,, डॉक्स पढ़ने के लिए है अपने डिबगर उपयोग करते हैं, और समय यह समझना लेने के बिना कॉपी-पेस्ट नहीं है कोड।

jsfiddle