D3.js में बाउंडिंग बॉक्स

Question

मुझे लगता है कि आप में से कई, जिन्होंने D3.js के साथ काम किया है, पहले से ही एक ही चीज़ का अनुभव कर चुके हैं: आपका नेटवर्क या आपके द्वारा उठाए जाने वाले जो भी चलने योग्य तत्व svg-element से बाहर निकलते हैं, उन्हें धक्का दिया जाता है कठिन। यदि मेरा नेटवर्क बड़े नोड्स गायब हो जाता है, तो वे 'दुनिया के किनारे का पतन' करते हैं।

मैं, सुंदर shure वहाँ svg एक ठोस 'दीवार' की सीमा बनाने के लिए एक रास्ता है कर रहा हूँ ताकि तत्वों यह नहीं छोड़ सकते और अंतरिक्ष :) के माध्यम से अदृश्य उड़

क्या आप इस के साथ क्या किया मुसीबत? आपने इसे कैसे ठीक किया? (रखने

अग्रिम धन्यवाद, डेविड

Answer 1

अंत में, यदि आपको वेब पर सही साइटें मिलती हैं तो यह बहुत आसान है। http://bl.ocks.org/1129492 वही करता है जो मैं चाहता था - वस्तुएं svg से बाहर नहीं जा सकती हैं। तो नोड्स पदों को अद्यतन करते समय उन्होंने कुछ बाधाओं को जोड़ा। मेरे 'टिक' समारोह

node.attr("cx", function(d) { return d.x = Math.max(15, Math.min(width - 15, d.x)); }) 
    .attr("cy", function(d) { return d.y = Math.max(15, Math.min(height - 15, d.y)); }); 

link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

तरह समाप्त हो गया यह कहा जाता है कि जब भी कुछ महत्वपूर्ण, हो सकता है "टिक" -thing कुछ D3.js अंदर कहीं गहरे बनाया है, तो मुझे उस बारे में नहीं पूछते है। :)

दी गई कोड में पहली दो पंक्तियां और अंतिम एक जांच करें कि निर्देशांक बॉक्स से बाहर नहीं निकलते हैं।

आशा इस कोई वहाँ बाहर मदद कर सकते हैं तेजी से मैंने किया था काम करने के लिए;)

एक अच्छा समय है, डेव

Answer 2

सामान्य तरीके ग्राफ दृश्य भागने आप सीमांकन बॉक्स प्राप्त करने के लिए है से ठीक करने के लिए, तो एसवीजी कि वास्तव में व्यूपोर्ट पर सीमांकन बॉक्स नक्शे पर एक परिवर्तन बनाने के पहलू अनुपात कुछ अस्पष्ट उचित मूल्य पर क्लैंप किया गया)।

यदि उपयोगकर्ता ज़ूम इन करता है, तो आप इस प्रक्रिया को भूल जाते हैं।

परिणाम यह होगा कि यदि "सामान" उड़ जाती है तो आप प्रभावी रूप से इसे ज़ूम आउट कर देखेंगे। और उपयोगकर्ता ज़ूम कर सकते हैं जैसा कि वे कृपया करते हैं।

इस काम को अच्छी तरह से प्राप्त करने की कुंजी एक राज्य ग्राफ लिखना है। जब कुछ पुनर्मूल्यांकन को ट्रिगर करता है तो आप "बाउंडिंग बॉक्स को ठीक करें" मोड में जाते हैं, और जब ग्राफ अधिकतर चलते रहें, तो आप "उपयोगकर्ता नियंत्रण ज़ूम" मोड पर स्विच करते हैं। इसे अच्छी तरह से काम करने के लिए प्राप्त करना मतलब है कि राज्यों के बीच संक्रमण प्राप्त करना (हमेशा उन्नत उपयोगकर्ताओं के लिए ओवरराइड प्रदान करना)।

Answer 3

सीमाओं को निर्देशित ग्राफ में सीमाओं को एक ठोस "दीवार" बनाने के लिए, आपको बाध्यकारी बॉक्स के किनारों के लिए कुछ कस्टम टकराव का पता लगाने की आवश्यकता होगी। Here's an example of a custom collision detection।

क्रिस्टोफर का दृष्टिकोण छोटे ग्राफ के लिए अच्छा काम करेगा, लेकिन व्यूपोर्ट से बहुत अधिक ग्राफ के लिए वे अपरिहार्य रूप से छोटे आकारों तक स्केल करेंगे। ऊपर दिए गए दृष्टिकोण छोटे व्यूपोर्ट्स में बड़े ग्राफ पर असफल हो जाएंगे क्योंकि टकराव किसी बिंदु पर हल नहीं हो पाएंगे।

वास्तव में बड़े ग्राफ के लिए, मैं बस उपयोगकर्ता को पैन और ज़ूम आउट करने की अनुमति देता हूं। This SO post gives some tips about zooming। आपको rect बनाने की भी आवश्यकता होगी जो आपके ग्राफ का आकार माउस ईवेंट प्राप्त करने के लक्ष्य के रूप में है। आप tick ईवेंट हैंडलर में, उदाहरण के लिए, एक बल निर्देशित ग्राफ़ के आकार के लिए गतिशील रूप से इसका आकार बदल सकते हैं।

आशा है कि वे कुछ उपयोगी पॉइंटर्स हैं।