DC.js - पाई चार्ट

एक पाई चार्ट एक परिपत्र सांख्यिकीय ग्राफ है। यह एक संख्यात्मक अनुपात दिखाने के लिए स्लाइस में विभाजित है। यह अध्याय बताता है कि DC.js का विस्तार से पाई चार्ट कैसे बनाया जाए।

पाई चार्ट विधियाँ

पाई चार्ट बनाने के लिए आगे बढ़ने से पहले, हमें यह समझना चाहिए dc.pieChartक्लास और उसके तरीके। Dc.pieChart एक चार्ट बनाने की बुनियादी कार्यक्षमता प्राप्त करने के लिए मिश्रण का उपयोग करता है। Dc.pieChart द्वारा उपयोग किए जाने वाले मिश्रण इस प्रकार हैं -

  • baseMixin
  • capMixin
  • colorMixin

Dc.pieChart का पूरा वर्ग चित्र इस प्रकार है -

Dc.pieChart को उपरोक्त निर्दिष्ट मिश्रणों के सभी तरीकों के साथ-साथ पाई चार्ट को विशेष रूप से आकर्षित करने के अपने तरीके हैं। वे इस प्रकार हैं -

  • cx ([cx])
  • ड्रापपैथ्स ([पथ])
  • खाली शीर्षक ([शीर्षक])
  • बाहरी लेबल ([लेबल])
  • इनररैडियस ([इनररेडियस])
  • minAngleForLabel ([minAngleForLabel])
  • त्रिज्या ([त्रिज्या])
  • स्लाइसकैप ([कैप])

आइए हम इनमें से प्रत्येक पर विस्तार से चर्चा करें।

cx ([cx])

इसका उपयोग केंद्र x समन्वय स्थिति को प्राप्त करने या स्थापित करने के लिए किया जाता है, जिसे नीचे परिभाषित किया गया है -

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

इसी तरह, आप y- कोऑर्डिनेट पोजिशन कर सकते हैं।

ड्रापपैथ्स ([पथ])

इस विधि का उपयोग पाई चार्ट के लिए पथ बनाने के लिए किया जाता है और इसे नीचे परिभाषित किया जाता है -

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

खाली शीर्षक ([शीर्षक])

डेटा नहीं होने पर शीर्षक सेट करने के लिए इस विधि का उपयोग किया जाता है। यह नीचे परिभाषित किया गया है -

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

बाहरी लेबल ([लेबल])

इसका उपयोग चार्ट के बाहरी किनारे से स्लाइस लेबल ऑफसेट करने के लिए किया जाता है। यह नीचे परिभाषित किया गया है -

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

इनररैडियस ([इनररेडियस])

पाई चार्ट के आंतरिक त्रिज्या को प्राप्त करने या स्थापित करने के लिए इस पद्धति का उपयोग किया जाता है। यदि आंतरिक त्रिज्या से अधिक है0px, फिर पाई चार्ट को डोनट चार्ट के रूप में प्रस्तुत किया जाएगा। यह नीचे परिभाषित किया गया है -

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

लेबल रेंडरिंग के लिए न्यूनतम स्लाइस कोण प्राप्त करने या सेट करने के लिए इस विधि का उपयोग किया जाता है। यह नीचे परिभाषित किया गया है -

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

त्रिज्या ([त्रिज्या])

इस पद्धति का उपयोग बाहरी त्रिज्या को प्राप्त करने या स्थापित करने के लिए किया जाता है। यदि त्रिज्या निर्दिष्ट नहीं है, तो यह न्यूनतम चार्ट की चौड़ाई और ऊंचाई का आधा हिस्सा लेगा। यह नीचे परिभाषित किया गया है -

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

स्लाइसकैप ([कैप])

हो जाता है या पाई चार्ट उत्पन्न करेगा स्लाइस की अधिकतम संख्या निर्धारित करता है। शीर्ष स्लाइस उच्च से निम्न तक के मूल्य द्वारा निर्धारित किए जाते हैं। टोपी से अधिक अन्य स्लाइसों को एक ही 'अन्य' स्लाइस में रोल किया जाएगा।

एक पाई चार्ट बनाएं

आइए हम DC में एक पाई चार्ट बनाते हैं। इस पाई चार्ट उदाहरण में, हम एक डाटासेट नाम लेते हैंpeople.csvफ़ाइल। नमूना डेटा फ़ाइल निम्नानुसार है -

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

उपरोक्त नमूने में कई रिकॉर्ड हैं। आप निम्न लिंक पर क्लिक करके फाइल को डीसी स्थान पर डाउनलोड कर सकते हैं।

people.csv

अब, डीसी में पाई चार्ट बनाने के लिए निम्नलिखित चरणों का पालन करें।

चरण 1: एक स्क्रिप्ट शामिल करें

हमें निम्नलिखित कोड का उपयोग करके डी 3, डीसी और क्रॉसफिल्टर को जोड़ना चाहिए -

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

चरण 2: एक चर को परिभाषित करें

एक प्रकार की वस्तु बनाएं, dc.pieChart जैसा कि नीचे दिखाया गया है -

var pieChart = dc.pieChart('#pie');

यहां पाई आईडी को पाई के साथ मैप किया जाता है।

चरण 3: डेटा पढ़ें

का उपयोग करके अपने डेटा (कहते हैं, People.csv से) पढ़ें d3.csv()समारोह। इसे निम्नानुसार परिभाषित किया गया है -

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

यहां, यदि निर्दिष्ट स्थान में डेटा फ़ाइल उपलब्ध नहीं है, तो d3.csv () फ़ंक्शन एक त्रुटि देता है।

चरण 4: क्रॉसफिल्टर को परिभाषित करें

Crossfilter के लिए एक चर को परिभाषित करें और Crossfilter को डेटा असाइन करें। यह नीचे परिभाषित किया गया है -

var mycrossfilter = crossfilter(people);

चरण 5: एक आयाम बनाएँ

नीचे दिए गए फ़ंक्शन का उपयोग करके लिंग के लिए एक आयाम बनाएं -

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

यहां, लोगों के लिंग का उपयोग आयाम के लिए किया जाता है।

चरण 6: घटाएँ ()

उपरोक्त बनाए गए लिंग आयाम पर समूह () और घटाव () फ़ंक्शन को लागू करके एक क्रॉसफ़िल्टर समूह बनाएं - groupDimension

var genderGroup = genderDimension.group().reduceCount();

चरण 7: पाई उत्पन्न करें

नीचे दिए गए फ़ंक्शन का उपयोग करके पाई उत्पन्न करें -

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

यहाँ,

  • पाई चार्ट की चौड़ाई 800 पर सेट है।

  • पाई चार्ट की ऊंचाई 300 पर सेट है।

  • पाई चार्ट का आयाम सेट किया गया है genderDimension आयाम () पद्धति का उपयोग करना।

  • पाई चार्ट का समूह सेट है genderGroup समूह () विधि का उपयोग करना।

  • अंतर्निहित ईवेंट का उपयोग करके डेटा लॉग करने के लिए एक क्लिक ईवेंट जोड़ा गया, renderlet()। जब भी चार्ट प्रदान या तैयार किया जाता है, तो रेंडरलेट का उपयोग किया जाता है।

चरण 8: कार्य उदाहरण

एक नई html फ़ाइल बनाएं, पाई। Html और उपरोक्त सभी चरणों को नीचे दिखाए अनुसार शामिल करें -

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

अब, ब्राउज़र का अनुरोध करें और हम निम्नलिखित प्रतिक्रिया देखेंगे।