DC.js - डेटा ग्रिड

डेटा ग्रिड का उपयोग अभिलेखों को फ़िल्टर करने और प्रदर्शित करने के लिए किया जाता है। यह अध्याय डेटा ग्रिड के बारे में विस्तार से बताता है।

डेटा ग्रिड के तरीके

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

  • dc.baseMixin

DddataGrid में इस मिक्सिन के सभी तरीकों के साथ-साथ डेटा ग्रिड को ड्रा करने के अपने तरीके हैं, जिन्हें इस प्रकार समझाया गया है -

शुरुआत (टुकड़ा)

इस पद्धति का उपयोग आरंभ स्लाइस के सूचकांक को प्राप्त करने या स्थापित करने के लिए किया जाता है। यह पद्धति तब लागू होती है जब पृष्ठांकन लागू किया जाता है।

इसी तरह, आप एंडलिस () कर सकते हैं।

समूह (समारोह)

इस विधि का उपयोग डेटा ग्रिड के लिए समूह कार्य करने के लिए किया जाता है।

html ([html])

डायनामिक html उत्पन्न करने के लिए फ़ंक्शन को प्राप्त करने या सेट करने के लिए इस विधि का उपयोग किया जाता है।

आदेश ([आदेश])

इसका उपयोग ऑर्डर फंक्शन को सॉर्ट करने के लिए किया जाता है।

आकार ([आकार])

इसका उपयोग ग्रिड में वस्तुओं की संख्या को प्रदर्शित करने के लिए किया जाता है।

SortBy ([SortByFunction])

इस पद्धति का उपयोग सॉर्ट-बाय फ़ंक्शन को प्राप्त करने या सेट करने के लिए किया जाता है। हम इस फ़ंक्शन का उपयोग करके किसी विशेष फ़ील्ड को सॉर्ट कर सकते हैं। उदाहरण के लिए: हम उम्र के अनुसार क्रमबद्ध कर सकते हैं, जिसे नीचे परिभाषित किया गया है -

chart.sortBy(function(d) {
   return d.age;
});

डेटा ग्रिड उदाहरण

आइए हम DC में एक डेटा ग्रिड का प्रदर्शन करते हैं। ऐसा करने के लिए, हमें नीचे दिए गए चरणों का पालन करना होगा -

चरण 1: शैलियों को जोड़ें

नीचे दिए गए कोडिंग का उपयोग करके CSS में शैलियों को जोड़ते हैं -

.dc-chart { font-size: 12px; }
.dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
.dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }

यहां, हमने चार्ट, ग्रिड-टॉप और ग्रिड-आइटम के लिए शैलियों को सौंपा है।

चरण 2: एक चर बनाएं

नीचे बताए अनुसार हम डीसी में एक चर बनाते हैं -

var barChart = dc.barChart('#line'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

यहाँ, हमने एक BarChart वैरिएबल आईडी को लाइन में असाइन किया है, countChart id मिस्ट्री है और ग्रीडचैट id mygrid है।

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

से डेटा पढ़ें people.csv नीचे दिखाए अनुसार फ़ाइल -

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(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

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

चरण 4: आयाम सेट करें

आप नीचे दिए गए कोडिंग का उपयोग करके आयाम सेट कर सकते हैं -

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

आयाम दिए जाने के बाद, नीचे दिए गए कोडिंग का उपयोग करके समूह को आयु दें -

var ageGroup = ageDimension.group().reduceCount();

चरण 5: एक चार्ट बनाएं

अब, नीचे दिए गए कोडिंग का उपयोग करके एक बार चार्ट बनाएं -

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

यहाँ,

  • हमने चार्ट की चौड़ाई 400 और ऊंचाई 200 बताई है।
  • इसके बाद, हमने डोमेन रेंज को [15,70] के रूप में निर्दिष्ट किया है।
  • हमने उम्र के रूप में x- अक्ष लेबल और गणना के रूप में y- अक्ष लेबल निर्धारित किया है।
  • हमने लोच और एक्स फ़ंक्शन को सच के रूप में निर्दिष्ट किया है।

चरण 6: ग्रिड चार्ट बनाएं

अब, नीचे दिए गए कोडिंग का उपयोग करके ग्रिड चार्ट बनाएं -

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

चरण 7: ग्रिड रेंडर करें

अब, नीचे दिए गए कोडिंग का उपयोग करके ग्रिड को प्रस्तुत करें -

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
countChart.render();
gridChart.render();

यहां, हमने HTML () फ़ंक्शन का उपयोग करके नाम को सॉर्ट किया है और अंत में चार्ट का प्रतिपादन किया है।

चरण 8: काम करने का उदाहरण

पूरा कोड इस प्रकार है। एक वेबपेज बनाएंdatagrid.html और इसमें निम्नलिखित परिवर्तन जोड़ें।

<html>
   <head>
      <title>DC datagrid sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
      
      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); 
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

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

            // age dimension
            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            barChart
               .width(400)
               .height(200)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .elasticY(true)
               .elasticX(true)
               .dimension(ageDimension)
               .group(ageGroup);

            countChart
               .dimension(mycrossfilter)
               .group(mycrossfilter.groupAll());

            gridChart
               .dimension(ageDimension)
               .group(function (data) {
                  return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
               })
               .size(100)
               .htmlGroup (function(d) { 
                  return 'Age: ' + d.key +
                  '; Count: ' + d.values.length +
                  ' people'
               })
               .html (function(d) { return d.name; })
               .sortBy(function (d) {
                  return d.name;
               })
               .order(d3.ascending);

            barChart.render();
            countChart.render();
            gridChart.render();
         });
      </script>
   </body>
</html>

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

प्रारंभ में, ग्रिड चार्ट निम्न स्क्रीनशॉट की तरह दिखता है।

यदि आप 63 और 66 के बीच एक विशेष आयु का चयन करते हैं, तो यह निम्नलिखित रिकॉर्ड को फ़िल्टर करता है।