पाई चार्ट के किनारे स्लाइस के निर्देशांक कैसे प्राप्त करें?

Question

मैं d3.layout.pie() का उपयोग कर डी 3 के साथ एक पाइचार्ट बना रहा हूं। यह ऐसा लगता है, काले बिंदुओं के बिना (मैंने उन्हें अपनी समस्या को स्पष्ट करने के लिए फ़ोटोशॉप में मैन्युअल रूप से रखा है)। मुझे आश्चर्य है कि मैं इन बिंदुओं के निर्देशांक की गणना कैसे कर सकता हूं, जो वहां कुछ टूलटिप्स लगाने के लिए सतह के बीच में हैं। मैं एक पूर्ण समाधान के लिए नहीं पूछ रहा हूं, लेकिन सिद्धांत के बारे में अधिक जानकारी कैसे करें। धन्यवाद।

Answer 1

आप किसी वृत्त की परिधि के पास एक बिंदु की गणना करने के following equations उपयोग कर सकते हैं:

x = cx + r * cos(a) 
y = cy + r * sin(a) 

कहाँ (cx, cy) चक्र के केंद्र है, r त्रिज्या है, और a है कोण।

इसके लिए आपके लिए काम करने के लिए, आपको अपने चार्ट पर पाई स्लाइस के आधार पर कोण की गणना करने का एक तरीका होगा - नीचे देखें।

---

d3 documentation for pie layouts के अनुसार, pie समारोह आर्क्स की एक सूची देता है, तो आप अपने अंक में से प्रत्येक की गणना करने के लिए इस डेटा की प्रक्रिया कर सकते हैं:

पाई (मान [सूचकांक])

मूल्यों की निर्दिष्ट सरणी पर पाई फ़ंक्शन का मूल्यांकन करता है। एक वैकल्पिक इंडेक्स निर्दिष्ट किया जा सकता है, जो प्रारंभ और अंत कोण कार्यों के साथ पारित किया जाता है। वापसी मूल्य आर्क डिस्क्रिप्टर

• मान - मान मूल्य द्वारा लौटाया गया डेटा मान है।
• startAngle - रेडियंस में चाप का प्रारंभ कोण।
• endAngle - रेडियंस में चाप के अंतिम कोण।
• डेटा - इस चाप के लिए मूल डेटाम।

मुमकिन है तुम सिर्फ प्रत्येक चाप के लिए endAngle और startAngle के बीच आधे दूरी लेते हैं, और वहाँ अपनी बात लगा सके।

// Compute the arcs! 
// They are stored in the original data's order. 
var arcs = []; 
index.forEach(function(i) { 
    var d; 
    arcs[i] = { 
    data: data[i], 
    value: d = values[i], 
    startAngle: a, 
    endAngle: a += d * k 
    }; 
}); 
return arcs; 

---

कि मदद करता है:

---

क्या इसके लायक है, यहाँ है कि प्रत्येक चाप गणना करने के लिए प्रयोग किया जाता है pie.js से कोड है

?

Answer 2

मुझे पता है कि यह एक साल हो गया है, आपने यह प्रश्न पूछा है, लेकिन सिर्फ एक ऐसे उत्तर में छोड़ना जो दूसरों की मदद कर सकता है। उन मंडलियों के परिवर्तन में arc.centriod() का उपयोग करने का प्रयास करें जिन्हें आप प्रदर्शित करना चाहते हैं।

कुछ इस

enterMenu.append("circle") 
      .attr("r", 5) 
      .attr('transform',function(d){ 
       return "translate(" + arc.centriod(d) + ")"; 
      }); 

इस तरह टुकड़ा के बीच बिल्कुल में चक्र से देना चाहिए। उपरोक्त फ़ंक्शन डी में आर्क का अंत कोण है।

आप संदर्भ के लिए इस लिंक http://bl.ocks.org/Guerino1/2295263

Answer 3

यह तुच्छ लग सकता है, लेकिन मैं x और y निर्देशांक प्रत्येक टुकड़ा अंदर खोजने की कोशिश कर रहा था, और जब मैंने देखा सूत्र ऊपर पोस्ट की जाँच करें,

एक्स = cx + r * क्योंकि (क)

y = cy + r * पाप (क)

, यह से (CX + 1 या cy +1) लंबाई त्रिज्या के लिए आर में वृद्धि से किया जा सकता है और दोहरा मूल कोण से गंतव्य कोण तक (ए) बढ़कर, फिर जोड़ना (सीएक्स, साइ)। उम्मीद है कि यह किसी की मदद करता है।