सर्कल में svg आकार कैसे रखें?

Question

मैं डी 3.जेएस के साथ थोड़ा सा खेल रहा हूं और मुझे सबसे ज्यादा काम मिल रहा है। लेकिन मैं अपने एसवीजी आकार को एक सर्कल में रखना चाहता हूं। तो मैं रंग और पाठ के साथ डेटा में अंतर दिखाऊंगा। मुझे पता है कि सर्कल और पाई चार्ट कैसे आकर्षित करें, लेकिन मैं मूल रूप से समान आकार की मंडलियों का एक चक्र बनाना चाहता हूं। और उन्हें ओवरलैप नहीं किया गया है, आदेश अप्रासंगिक है। मुझे नहीं पता कि कहां से शुरू करना है, प्रत्येक सर्कल के लिए x & y का पता लगाने के लिए।

सीधे शब्दों में उचित कदम आकार में कुछ कोण चर से अधिक लूप और sin() और cos() का उपयोग अपने x और y मूल्यों की गणना करने के लिए:

Answer 1

यहाँ, मनमाने ढंग से आकार के आकार के लिए, यह करने के लिए एक और तरीका है डी 3 के tree लेआउट का उपयोग कर: http://jsfiddle.net/nrabinowitz/5CfGG/

tree लेआउट (docs, example) x, आप के लिए प्रत्येक आइटम के y प्लेसमेंट यह पता लगाने जाएगा, के आधार पर एक दिया त्रिज्या और एक समारोह दो किसी भी आइटम के केंद्रों के बीच अलगाव लौट रहा है। इस उदाहरण में, मैं भिन्न आकारों की हलकों में प्रयोग किया जाता है, तो उन दोनों के बीच जुदाई उनके त्रिज्या की एक समारोह है:

var tree = d3.layout.tree() 
    .size([360, radius]) 
    .separation(function(a, b) { 
     return radiusScale(a.size) + radiusScale(b.size); 
    }); 

डी 3 tree लेआउट का उपयोग करते हुए पहले समस्या का हल, एक सर्कल में आइटम बिछाने। दूसरी समस्या, जैसा कि @ मार्कस नोट्स है, सर्कल के लिए दाएं त्रिज्या की गणना कैसे करें। मैंने निष्पक्षता के लिए यहां थोड़ा मोटा दृष्टिकोण लिया है: मैं सर्कल की परिधि का अनुमान लगाता हूं कि विभिन्न वस्तुओं के व्यास के योग के बीच में दिए गए पैडिंग के साथ, फिर परिधि से त्रिज्या की गणना करें:

var roughCircumference = d3.sum(data.map(radiusScale)) * 2 + 
     padding * (data.length - 1), 
    radius = roughCircumference/(Math.PI * 2); 

यहां परिधि सटीक नहीं है, और यह सर्कल में आपके पास कम वस्तुओं को कम और कम सटीक होगा, लेकिन यह इस उद्देश्य के लिए पर्याप्त है।

Answer 2

अगर मैं तुम्हें सही ढंग से समझ, यह एक काफी मानक गणित सवाल है।

उदाहरण के लिए:

मान लीजिए कि आप 3 वस्तुओं जगह की कोशिश कर रहे हैं। एक सर्कल में 360 डिग्री हैं। तो प्रत्येक वस्तु अगले से 120 डिग्री दूर है। अपने वस्तुओं के आकार में 20x20 पिक्सल कर रहे हैं, उन्हें निम्न स्थानों पर जगह:

x1 = sin( 0 * pi()/180) * r + xc - 10; y1 = cos( 0 * pi()/180) * r + yc - 10 
x2 = sin(120 * pi()/180) * r + xc - 10; y2 = cos(120 * pi()/180) * r + yc - 10 
x3 = sin(240 * pi()/180) * r + xc - 10; y3 = cos(240 * pi()/180) * r + yc - 10 

यहाँ, r वृत्त की त्रिज्या है और (xc, yc) वृत्त के केंद्र बिंदु के निर्देशांक हैं। -10's सुनिश्चित करें कि ऑब्जेक्ट में सर्कल पर उनके केंद्र (उनके शीर्ष बाएं कोने के बजाए) है। * pi()/180 डिग्री को रेडियंस में परिवर्तित करता है, जो यूनिट सबसे अधिक कार्यान्वयन sin() और cos() आवश्यक है।

नोट: यह आकार को सर्कल के चारों ओर समान रूप से वितरित करता है। यह सुनिश्चित करने के लिए कि वे ओवरलैप नहीं करते हैं, आपको अपने r को काफी बड़ा चुनना होगा। यदि वस्तुओं में सरल और समान सीमाएं हैं, तो उनमें से 10 को बाहर निकालें और आपको आवश्यक त्रिज्या को समझें और फिर, यदि आपको 20 स्थान देने की आवश्यकता है, तो त्रिज्या को तीन गुना बड़ा करें, 30 गुना बड़ा और आगे। यदि वस्तुओं को अनियमित रूप से आकार दिया जाता है और आप उन्हें सबसे छोटे सर्कल को खोजने के लिए सर्कल के चारों ओर इष्टतम क्रम में रखना चाहते हैं, तो यह समस्या बेहद गन्दा हो जाएगी। शायद इसके लिए एक लाइब्रेरी है, लेकिन मेरे पास मेरे सिर के शीर्ष में कोई नहीं है और चूंकि मैंने D3.js का उपयोग नहीं किया है, मुझे यकीन नहीं है कि यह आपको इस कार्यक्षमता के साथ प्रदान करेगा या नहीं।