d3.js में पेड़ के बाल नोड्स को संकुचित/विस्तारित करें?

Question

मैं (मेरे अपने json में अपने खुद के डेटा का एक सेट के साथ उदाहरणों में से एक को संशोधित करने या बल्कि) एक वृक्ष संरचना का निर्माण कर रहा हूँ और मैं कुछ कार्यक्षमता बनाने के लिए कोशिश कर रहा हूँ:

मेरे पेड़ के लेआउट है कि से पेड़ उदाहरण: http://mbostock.github.com/d3/ex/cluster.html

मैं एक ऑनक्लिक घटना (मंडलियों में) जोड़ रहा हूं जिसे मैं क्लिक किए गए नोड के बच्चों को ध्वस्त करना चाहता हूं। ऐसा कहने के लिए, जब कोई उपयोगकर्ता नोड से जुड़े स्टीलब्लू सर्कल पर क्लिक करता है, तो मैं चाहता हूं कि नोड्स बच्चे गायब हो जाएं।

मैंने प्रलेखन को खराब कर दिया है और मैंने कुछ भी नहीं बदला है जो मुझे नोड्स को पतन या गायब करने की अनुमति देगा।

मैं क्या कर सकता था?

Answer 1

इस है::

http://mbostock.github.com/d3/talk/20111018/tree.html

वहाँ अन्य के एक नंबर रहे हैं, लेकिन यहाँ एक बल निर्देशित लेआउट जो आप उन पर क्लिक करके/छिपाने नोड्स को दिखाने के लिए अनुमति देता है, आप कुछ विचार दे सकता है जो है मेरे SVG Open keynote से इंटरैक्टिव पदानुक्रमित लेआउट उदाहरण।

Answer 2

दुर्भाग्यवश मैं अभी भी डी 3 के साथ गति प्राप्त कर रहा हूं, और मुझे यकीन नहीं है कि आपके प्रश्न का सबसे अच्छा जवाब कैसे दिया जाए। http://bl.ocks.org/1062288

Answer 3

कुछ दृष्टिकोण हैं, कोई सिर्फ बच्चों के मार्कअप को छिपाने के लिए नियमित रूप से उपयोग करने के लिए उपयोग कर रहा है (अस्पष्टता: 0, या प्रदर्शन: कोई नहीं)। हालांकि, यह डेटा को अदृश्य बनाता है, पेड़ अपना आकार बनाए रखता है जैसे डेटा वहां है, आप इसे देख नहीं सकते हैं।

आमतौर पर आप चाहते हैं कि पेड़ डेटा का नाटक करने के लिए वहां नहीं है और तदनुसार अपडेट करें, इसके लिए आप उपर्युक्त लिंक में बल-निर्देशित लेआउट उदाहरण के समान दृष्टिकोण का उपयोग कर सकते हैं।

यह करने पर निर्भर करता: 1) डी 3 पेड़ 2 बनाने के लिए एक समारोह का उपयोग करें) सिमटने नोड्स 3) करने के लिए एक क्लिक करें घटना संलग्न क्लिक करें घटना नोड के बच्चों संपत्ति नाम बदलता है और 1 में फ़ंक्शन को कॉल) जो उस नोड के बच्चों के बिना पेड़ को दोबारा हटा देता है।

यहाँ nkoren के जवाब (http://bl.ocks.org/1062288) में लिंक से प्रासंगिक कोड है:

function update() { 
    // build the tree layout here 
    // append on("click", click) to the collapsible nodes 
} 

// Toggle children on click 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(); 
}