d3js एक पाई चार्ट

Question

के आसपास लेबल पुनर्वितरण मैं बाहर के लेबल के साथ एक डोनट चार्ट बनाने के लिए d3.js का उपयोग कर रहा हूं। पाई के प्रत्येक टुकड़े के सेंट्रॉइड के आधार पर कुछ त्रिकोणमिति का उपयोग करके, मैं लेबल को स्थिति देता हूं।

g.append("g") 
     .attr("class", "percentage") 
     .append("text") 
      .attr("transform", function(d) 
       { 
        var c = arc.centroid(d); 
        var x = c[0]; 
        var y = c[1]; 
        var h = Math.sqrt(x*x + y*y); 
        return "translate(" + (x/h * obj.labelRadius) + ',' + (y/h * obj.labelRadius) + ")"; 
       } 
      ) 
      .attr("dy", ".4em") 
      .attr("text-anchor", function(d) 
       { 
        return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start"; 
       } 
      ) 
      .text(function(d) { return d.data.percentage+"%"; }); 

क्या मैं अंत में पूरा करने के लिए कोशिश कर रहा हूँ लेबल कि पाइ चार्ट के किनारों से बाहर हैं, ओवरलैप को रोकने के लिए पुन: व्यवस्थित करने के लिए है।

तरीके मैं समस्या को हल करने की कोशिश की है में से एक "लंगर अंक", जहां लेबल तैनात किया जा सकता है सेट को परिभाषित करने के लिए, की गारंटी है कि वे कोई ओवरलैप। समस्या एंकरों के लिए सेंट्रॉइड मैपिंग कर रही है और स्लाइस और लेबल के बीच दृश्य पत्राचार की कुछ समझ को संरक्षित कर रही है (स्लाइस स्लिम के दौरान विशेष रूप से मुश्किल है)।

छवि ऊपर एंकर के संभावित स्थान दिखाता है (स्लाइस centroids के दिखाया गया है)। इन पदों के साथ ओवरलैप होना असंभव है।

समस्या में जटिलता जोड़ना तथ्य यह है कि जब लेबल (वे क्षैतिज होते हैं) पाई के ऊपर या नीचे के करीब होते हैं, तो वे पाई के दाएं या बाएं होने की तुलना में अधिक आसानी से ओवरलैप होते हैं ।

इस समस्या से कैसे संपर्क करें इस पर कोई विचार?

.attr("dy", function(d) 
{ 
    var c = arc.centroid(d); 
     var x = c[0]; 
     var y = c[1]; 
     var h = Math.sqrt(x*x + y*y); 
     var dy = y/h * obj.labelRadius; 
    dy=dy*fontSizeParam*.14/heightParam); 
    return (dy)+"em"; 
}) 

यह थोड़ा में मदद करता है, और लेबल के लिए कुछ प्रदान करती है, अभी भी एक समाधान है कि सभी मामलों को कवर किया जाएगा, हालांकि की तलाश:

[संपादित करें] meetamit के सुझाव के बाद, मैं निम्नलिखित लागू किया। ..

Answer 1

क्या आप दो आर्क बना सकते हैं? एक चार्ट के लिए, और लेबल के लिए एक?

// first arc used for drawing the pie chart 
var arc = d3.svg.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

// label attached to first arc 
g.append("text") 
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .text(function(d) { return d.data.age; }); 

// second arc for labels 
var arc2 = d3.svg.arc() 
    .outerRadius(radius + 20) 
    .innerRadius(radius + 20); 

// label attached to second arc 
g.append("text") 
    .attr("transform", function(d) { return "translate(" + arc2.centroid(d) + ")"; }) 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .text(function(d) { return d.data.age; }); 

Answer 2

वहाँ एक अच्छा, व्यावहारिक d3.js आधारित प्रोग्रामर द्वारा समाधान जॉन विलियम्स यहां प्रस्तुत है:

https://www.safaribooksonline.com/blog/2014/03/11/solving-d3-label-placement-constraint-relaxing/

यह उचित प्रतिबंधों, उदा मामलों के लिए अच्छी तरह से काम करना चाहिए ऊपर चर्चा के अनुसार अधिकतम 12 लेबल। आलेख में अधिक उन्नत एल्गोरिदम के लिए पॉइंटर्स भी हैं, लेकिन यह सरल दृष्टिकोण वास्तव में, जब पर्याप्त लेबल-सामग्री बाधाओं के साथ उपयोग किया जा सकता है, तो उन परिणामों को दें जो अन्य विधियों की तुलना में अधिक व्यवस्थित दृश्य उपस्थिति प्राप्त करते हैं।