2013-07-25 6 views
21

से प्रारूप मैं की तरह एक फ्लैट json फ़ाइल संरचना है:उत्पन्न (बहुस्तरीय) flare.json डेटा फ्लैट json

[ 
{ 
    "name": "DEF", 
    "parent": "null", 
    "relation": "null", 
    "children": [ 
       { "name": "ABC", 
        "parent": "DEF", 
        "relation": "ghi", 
        "children": [ 
           "name": "new_name", 
           ... 
           "children": [] 
           ] 
       } 
       ] 
    } 
] 

वहाँ:

[ 
{ "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 }, 
{ "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 }, 
{ "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 } 
.... 
.... 
] 

और क्या मैं चाहता हूँ है की तरह एक नेस्टेड फ़ाइल संरचना इस पर कोई सीमा नहीं है कि इसे कितने स्तरों पर जाना चाहिए। मेरे पास वर्तमान अधिकतम 30 है। नोड के बच्चों की संख्या पर कोई सीमा नहीं है। उदाहरण के लिए। रूट नोड में शेष सभी अपने बच्चों के रूप में हैं।

मैंने अभी तक क्या प्रयास किया है?

  • पढ़ें d3.nest के बारे में() और कैसे यह घोंसला करने में सक्षम है, लेकिन पूरी तरह से नहीं। https://groups.google.com/forum/?fromgroups=#!topic/d3-js/L3UeeUnNHO8/discussion

  • इस के लिए एक अजगर पटकथा लिखी है, लेकिन यह शून्य मान के साथ अटक जाती है और यह भी के बाद से डेटा घिरा नहीं है (यह दुगुनी में हर रोज बढ़ जाती है) इसलिए यह बहुत बहुत धीमी है।

  • मैंने बल निर्देशित लेआउट की कोशिश की और यह बहुत अच्छी तरह से काम किया लेकिन मैं एक और लेआउट जोड़ना चाहता हूं जो विज़ुअलाइज़ेशन को आसान बनाता है।

  • मैं पोस्ट की गई कुछ अन्य पायथन स्क्रिप्ट के साथ जा सकता हूं लेकिन वे "नाम" और "बच्चों" की तुलना में किसी अन्य जानकारी को आगे नहीं लेते हैं।

  • मैंने इसे पढ़ा: http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/ लेकिन उनके पास पहले स्थान पर सही प्रारूप डेटा भी है। मैं जो बनाना चाहता हूं वह http://bl.ocks.org/mbostock/4339083 है।

डेटा का स्रोत एमएस एसक्यूएल सर्वर डेटाबेस है जो मैं पाइथन के माध्यम से ला रहा हूं और पार्सिंग कर रहा हूं। कृप्या सहायता करे! मैं पिछले 2 हफ्तों से इस पर अटक गया हूं।

धन्यवाद

उत्तर

40

यहाँ एक कार्यान्वयन है, जावास्क्रिप्ट में: http://jsfiddle.net/9FqKS/

आप आसानी से देखने के लिए एक नाम के आधार पर मानचित्र बनाकर शुरू करते हैं। ऐसा करने के कई तरीके हैं - इस मामले में, मैं एक .reduce विधि है, जो एक खाली वस्तु और data सरणी पर दोहराता साथ शुरू होता है का उपयोग करें, प्रत्येक नोड के लिए एक प्रवेश जोड़ने:

// create a {name: node} map 
var dataMap = data.reduce(function(map, node) { 
    map[node.name] = node; 
    return map; 
}, {}); 

यह बराबर है करने के लिए:

var dataMap = {}; 
data.forEach(function(node) { 
    dataMap[node.name] = node; 
}); 

(। मैं कभी कभी लगता है कि कम करने और अधिक सुरुचिपूर्ण है) फिर iteratively अपने माता पिता के लिए प्रत्येक बच्चे को जोड़ने के लिए, या रूट सरणी के लिए अगर कोई माता पिता पाया जाता है:

// create the tree array 
var tree = []; 
data.forEach(function(node) { 
    // find parent 
    var parent = dataMap[node.parent]; 
    if (parent) { 
     // create child array if it doesn't exist 
     (parent.children || (parent.children = [])) 
      // add node to parent's child array 
      .push(node); 
    } else { 
     // parent is null or missing 
     tree.push(node); 
    } 
}); 

जब तक आपका पेड़ बड़ा न हो, मुझे नहीं लगता कि यह बहुत महंगा होना चाहिए, इसलिए आपको इसे क्लाइंट साइड पर करने में सक्षम होना चाहिए (यदि आप नहीं कर सकते हैं, तो आपके पास आसानी से किसी भी डेटा को प्रदर्शित करने के लिए बहुत अधिक डेटा हो सकता है मामला)।

+2

बहुत सारे धन्यवाद! यह एक आकर्षण की तरह काम करता है !! मैं यह नहीं बता सकता कि मुझे कितना राहत मिली है! मैं जावास्क्रिप्ट के लिए नया हूं, तो क्या आप डेटामैप फ़ंक्शन को थोड़ा सा समझा सकते हैं? मेरे जैसे अन्य जेएस नोब्स के लिए उपयोगी हो सकता है। –

+0

निश्चित रूप से, ऊपर मेरा संपादन देखें। – nrabinowitz

+0

बहुत बढ़िया! बहुत अच्छी तरह से समझाया! बहुत बहुत धन्यवाद। आप जानते हैं कि आपके समाधान का सबसे अच्छा हिस्सा क्या है? यह अगली संबंधित समस्या का ख्याल रखता है जिसे मैं हल करने के बाद पूछना चाहता था! : डी और यदि माता-पिता मौजूद नहीं थे तो वह नए रूट नोड्स बना रहा था। काश मैं इसे 100 से वोट दे सकता हूं! अब डी 3 में पेड़ को प्रस्तुत करने के लिए नीचे उतरना। :) –

संबंधित मुद्दे