जावास्क्रिप्ट और डी 3

Question

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

Answer 1

आप पृष्ठ को या आकार बदलने पर एक svg.attr ("width")। Attr ("height") को समायोजित कर सकते हैं, लेकिन d3 तत्वों को बदलने के लिए आपको अपने कोड में अतिरिक्त व्यवहार की आवश्यकता होगी नया आकार

तुम भी एक svg वस्तु की .viewBox विशेषता है, जो गतिशील svg तत्वों स्केल करेगा गौर कर सकते हैं, लेकिन मैं मिल गया है विभिन्न ब्राउज़रों के बीच अपने व्यवहार को असमान होने के लिए:

http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

Answer 2

मैं कुछ दिन पहले इस वांछित व्यवहार के एक डेमो को एक साथ रखो। इसे यहां देखें - http://bl.ocks.org/4444770

असल में, आप खिड़की के आकार को सुनते हैं, जी तत्व में आनुपातिक परिवर्तन लागू करते हैं जो सभी एसवीजी तत्वों को लपेटता है, और माता-पिता एसवीजी के आकार को समायोजित करता है। pageload पर और विंडो आकार परिवर्तन, जहां "कंटेनर" div एसवीजी पकड़े है पर इस कोड को कॉल करें:

d3.select("g").attr("transform", "scale(" + $("#container").width()/900 + ")"); 
$("svg").height($("#container").width()*0.618); 

यह एक अच्छा तरीका है अगर आपके एसवीजी एक div भीतर रखा जाता है।

दूसरा तरीका एसवीजी व्यूबॉक्स का उपयोग करना है, जैसा कि माइक Bostock द्वारा दिखाया गया है - http://bl.ocks.org/harlantwood/raw/6900108/। यह विधि सर्वोत्तम है यदि आप शरीर को एसवीजी जोड़ रहे हैं, और मुझे यकीन है कि एसवीजी को एक div के अंदर रखकर इस विधि का उपयोग करने का कोई तरीका है, लेकिन मैं समाधान खोजने में असमर्थ था, और इस प्रकार उपरोक्त बनाया चारों ओर काम करो।