DC.js - बेसमिक्सिन

baseMixinकिसी भी प्रकार के चार्ट को बनाने के लिए आवश्यक बुनियादी विधियाँ प्रदान करता है। यह चार्ट की चौड़ाई को सेट करने से लेकर चार्ट के उन्नत फ़िल्टरिंग तक है।

सामान्य चार्ट विकल्प

basicMixinचार्ट के गुण प्राप्त / सेट करने के लिए कई चार्ट विधियाँ प्रदान करता है। वे इस प्रकार हैं,

chartID() - चार्ट की आंतरिक संख्यात्मक आईडी लौटाता है।
chartGroup( [chartGroup])- उस समूह को हो जाता है या सेट कर देता है जिसका चार्ट होता है। DC.js में, चार्ट को एक सेट में समूहीकृत किया जा सकता है। एक समूह के सभी चार्टों में समान क्रॉसफ़िल्टर डेटासेट साझा करने की उम्मीद की जाती है। वे एक साथ फिर से प्रस्तुत किए जाते हैं।

mychart.chartGroup('dashboard');

minWidth( [minWidth]) - चार्ट की न्यूनतम चौड़ाई निर्धारित करता है।

mychart.minWidth(300);

width( [width]) - चार्ट की चौड़ाई प्राप्त या निर्धारित करता है।

mychart.width(600);

minHeight( [minHeight]) - चार्ट की न्यूनतम ऊंचाई प्राप्त या निर्धारित करता है।

mychart.minHeight(300);

height( [height]) - चार्ट की ऊंचाई प्राप्त या निर्धारित करता है।

mychart.height(300);

title( [titleFunction])- शीर्षक समारोह हो जाता है या सेट हो जाता है। शीर्षक चार्ट में एसवीजी एलिमेंट का बाल तत्व का शीर्षक है (जैसे एक बार चार्ट में एक बार)। चार्ट में शीर्षक को ब्राउज़र में टूलटिप के रूप में दर्शाया गया है।

mychart.title(function(data) { 
   return d.key + ': ' + d.value; 
});

label( labelFunction[??]) - शीर्षक () विधि के समान, लेकिन यह शीर्षक के बजाय लेबल सेट करता है।

mychart.label(function(data) { 
   return d.key + ': ' + d.value; 
});

options(opts)- जावास्क्रिप्ट ऑब्जेक्ट का उपयोग करके कोई भी चार्ट विकल्प सेट करता है। प्रत्येक कुंजी चार्ट में उपलब्ध संगत विधि का प्रतिनिधित्व करती है और मिलान विधि प्रासंगिक मूल्य के साथ लागू की जाएगी।

mychart.options ({
   'width' : 300,
   'height' : 300
});

यहां, चौड़ाई () और ऊंचाई () विधि निर्दिष्ट मान के साथ निकाल दी जाएगी।

legend( [legend])- चार्ट के लिए एक किंवदंती संलग्न करता है। का उपयोग कर किंवदंती बनाई जा सकती हैd3.legend() तरीका।

mychart.legend (
   dc.legend()
      .x(500)
      .y(50)
      .itemHeight(12)
      .gap(4))

anchor( parent[??])- रूट SVGElement सेट करता है या तो एक मौजूदा चार्ट की जड़ या किसी भी वैध डी 3 एकल चयनकर्ता। वैकल्पिक रूप से, चार्ट समूह को दूसरे तर्क का उपयोग करके भी सेट किया जा सकता है।
anchorName() - चार्ट के लंगर स्थान के डोम आईडी हो जाता है।
svg( [svgElement]) - चार्ट के SVGElement को लौटाता है।
resetSvg() - DOM में SVG कंटेनर को रीसेट करता है।
root( [rootElement]) - चार्ट के रूट कंटेनर हो जाता है।

डेटा विकल्प

basicMixinचार्ट के लिए डेटा सेट करने के तरीके प्रदान करता है। डेटा को क्रॉसफिल्टर आयाम और समूह के रूप में सेट किया गया है। इसके अलावा, यह अंतर्निहित डेटासेट प्राप्त करने का एक विकल्प प्रदान करता है।

dimension( [dimension])- सेट या चार्ट का आयाम प्राप्त करता है। एक आयाम किसी भी वैध क्रॉसफ़िल्टर आयाम है।

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);

group( group[??])- सेट या चार्ट का समूह प्राप्त करता है। एक समूह किसी भी वैध Crossfilter समूह है। कोड में बाद में इसका उपयोग करने के लिए दूसरे तर्क का उपयोग करके समूह का नाम दिया जा सकता है।

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));

data( [callback]) - डेटा कॉलबैक सेट करता है और हमें अंतर्निहित चार्ट का डेटा सेट प्राप्त करने में सक्षम बनाता है।

// get all groups
mychart.data(function (group) { 
   return group.all(); 
});

// get top five groups
mychart.data(function (group) { 
   return group.top(5); 
});

keyAccessor( [keyAccessor])- कुंजी एक्सेसर फ़ंक्शन को प्राप्त या सेट करता है। इसका उपयोग अंतर्निहित क्रॉसफिल्टर समूह से कुंजी प्राप्त करने के लिए किया जाता है। कुंजी का उपयोग पाई चार्ट में स्लाइस के लिए और लाइन / बार चार्ट में एक्स-एक्सिस के लिए किया जाता है। डिफ़ॉल्टkey accessor फ़ंक्शन निम्नानुसार है -

chart.keyAccessor(function(d) { return d.key; });

valueAccessor( [valueAccessor])- हो जाता है या मान एक्सेसर फ़ंक्शन सेट करता है। इसका उपयोग अंतर्निहित क्रॉसफिल्टर समूह से मूल्य प्राप्त करने के लिए किया जाता है। मान का उपयोग पाई चार्ट में टुकड़ा आकार और लाइन / बार चार्ट में y- अक्ष स्थिति के लिए किया जाता है। डिफ़ॉल्टvalue accessor फ़ंक्शन निम्नानुसार है -

chart.valueAccessor(function(d) { return d.value; });

ordering( [orderFunction])- क्रमिक आयाम का आदेश देने के लिए एक आदेश देता है या सेट करता है। डिफ़ॉल्ट रूप से, एक चार्ट का उपयोग करता हैcrossfilter.quicksort.by तत्वों को सॉर्ट करने के लिए।

_chart.ordering(dc.pluck('key'));

फ़िल्टर विकल्प

छानना DC.js. के मुख्य आकर्षण में से एक है हम चार्ट () विधि और कॉल चार्ट के redrawGroup () या dc.redrawAll () विधि का उपयोग करके चार्ट ऑब्जेक्ट पर सीधे एक या अधिक फ़िल्टर लागू कर सकते हैं और चार्ट पर फ़िल्टरिंग प्रभाव देख सकते हैं। डिफ़ॉल्ट रूप से, एक चार्ट ऑब्जेक्ट फ़िल्टर () विधि का उपयोग करके एक या अधिक फ़िल्टर लेता है, इसे अंतर्निहित क्रॉसफ़िल्टर () डेटा सेट पर लागू करता है, क्रॉसफ़िल्टर से फ़िल्टर किए गए डेटा को प्राप्त करता है और फ़िल्टर किए गए डेटा का उपयोग करके चार्ट को फिर से बनाता है। DC.js चार्ट में फ़िल्टरिंग को संभालने के लिए निम्नलिखित तरीके प्रदान करता है।

फ़िल्टर ([फ़िल्टर])

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

mychart.filter(10);

सभी फ़िल्टर हटाने के लिए, फ़िल्टर विधि से कॉल करें nullमूल्य। फ़िल्टर निम्न में से कोई भी एक आइटम हो सकता है -

null - चार्ट पहले से लागू सभी फिल्टर को हटा देगा।
single value - चार्ट अंतर्निहित क्रॉसफिल्टर के फिल्टर विधि को कॉल करेगा और आपूर्ति मूल्य भेज देगा।
dc.filters.RangedFilter- यह दो मूल्यों को स्वीकार करता है, निम्न और उच्च। चार्ट निम्न और उच्च मूल्य के बीच की सीमा को छोड़कर सभी डेटा को फ़िल्टर करेगा।
dc.filters.TwoDimensionalFilter - यह दो-आयामी मूल्यों को स्वीकार करता है जो गर्मी के नक्शे में उपयोग किए जाते हैं।
dc.filters.RangedTwoDimensionalFilter - यह dc.filters.RangedFilter के समान है, सिवाय इसके कि यह दो-आयामी मूल्य केवल तितर बितर भूखंडों में उपयोग किया जाता है।

हैफिल्टर ([फ़िल्टर])

जाँचता है कि आपूर्ति फ़िल्टर उपलब्ध है या नहीं चार्ट में।

प्रतिस्थापन ([फ़िल्टर])

आपूर्ति किए गए फ़िल्टर के साथ चार्ट के वर्तमान फ़िल्टर को बदलता है।

फिल्टर ()

चार्ट से जुड़े सभी वर्तमान फ़िल्टर लौटाता है।

filterAll ()

चार्ट से जुड़े सभी फ़िल्टर साफ़ करता है।

फ़िल्टरहैंडलर ([फ़िल्टरहैंडलर])

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

chart.filterHandler(function (dimension, filters) {
   if (filters.length === 0) {
      
      // the empty case (no filtering)
      dimension.filter(null);
   } else if (filters.length === 1 && !filters[0].isFiltered) {
      
      // single value and not a function-based filter
      dimension.filterExact(filters[0]);
   } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
      
      // single range-based filter
      dimension.filterRange(filters[0]);
   } else {
      
      // an array of values, or an array of filter objects
      dimension.filterFunction(function (d) {
         
         for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
               
            if (filter.isFiltered && filter.isFiltered(d)) {
               return true;
            } else if (filter <= d && filter >= d) {
               return true;
            }
         }
         return false;
      });
   }
   return filters;
});

hasFilterHandler ([hasFilterHandler])

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

chart.hasFilterHandler(function (filters, filter) {
   if (filter === null || typeof(filter) === 'undefined') {
      return filters.length > 0;
   }
   
   return filters.some(function (f) {
      return filter <= f && filter >= f;
   });
});

addFilterHandler ([addFilterHandler])

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

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler ([removeFilterHandler])

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

chart.removeFilterHandler(function (filters, filter) {
   for (var i = 0; i < filters.length; i++) {
      
      if (filters[i] <= filter && filters[i] >= filter) {
         filters.splice(i, 1);
         break;
      }
      
   }
   return filters;
});

रीसेटफिल्टरहैंडलर ([रीसेटफिल्टरहैंडलर])

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

function (filters) {
   return [];
}

फ़िल्टरप्रिन्टर ([फ़िल्टरप्रिन्टरफ़ंक्शन])

प्रिंटर-फ़िल्टर फ़ंक्शन को प्राप्त या सेट करता है। यह फ़ंक्शन फ़िल्टर जानकारी को प्रिंट करने के लिए चार्ट द्वारा उपयोग किया जाता है।

commitHandler ()

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

घटना विकल्प

DC.js कुछ कार्यात्मकताओं को करने के लिए घटनाओं के एक सीमित सेट को परिभाषित करता है जैसे कि फ़िल्टरिंग, ज़ूमिंग आदि। DC.js में परिभाषित घटनाओं की सूची इस प्रकार है:

renderlet - संक्रमण के बाद निकाल दिया जाता है और रेंडर किया जाता है।
pretransition - संक्रमण शुरू होने से पहले निकाल दिया गया।
preRender - चार्ट रेंडरिंग से पहले निकाल दिया गया।
postRender - चार्ट रेंडरलेट के सभी तर्क सहित रेंडरिंग खत्म होने के बाद निकाल दिया गया।
preRedraw - चार्ट को दोबारा तैयार करने से पहले निकाल दिया गया।
postRedraw - चार्ट के खत्म होने के बाद निकाल दिया गया जिसमें रेंडरलेट के सभी तर्क शामिल हैं।
filtered - एक फिल्टर लागू होने के बाद निकाल दिया, जोड़ा या हटा दिया।
zoomed - जूम ट्रिगर होने के बाद निकाल दिया गया।

basicMixin एक विधि प्रदान करता है, on(event, listener) उपरोक्त सभी घटनाओं के लिए कॉलबैक फ़ंक्शन सेट करना।

on(event, listener) - विशिष्ट घटना के लिए कॉलबैक या श्रोता फ़ंक्शन सेट करता है।
onClick(datum)- यह प्रत्येक चार्ट के लिए ऑनक्लिक हैंडलर के रूप में डी 3 पास किया जाता है। डिफ़ॉल्ट व्यवहार क्लिक किए गए डेटा (कॉलबैक को पास) पर फ़िल्टर करना और चार्ट समूह को फिर से बनाना है।

रेंडरिंग विकल्प

BasicMixin चार्ट्स को रेंडर करने के तरीकों की एक सूची प्रदान करता है। उनका उपयोग चार्ट बनाने के लिए किया जाता है और वे इस प्रकार हैं -

render()- चार्ट रेंडर करता है। आम तौर पर, इसका उपयोग पहले किया जाएगा, जब चार्ट तैयार किया जाएगा।
renderGroup() - समूह में सभी चार्ट रेंडर करते हैं क्योंकि यह चार्ट है।
renderLabel( [renderLabel]) - लेबल रेंडरिंग को चालू / बंद करता है।
renderTitle( [renderTitle]) - शीर्षक रेंडरिंग को चालू / बंद करना।
redraw() - पूरे चार्ट को फिर से बनाता है।
redrawGroup() - इस चार्ट के अंतर्गत समूह के सभी चार्ट्स को फिर से लिखा जाता है।

संक्रमण विकल्प

BasicMixin चार्ट के संक्रमण प्रभाव को सेट करने के लिए तरीके प्रदान करता है और वे इस प्रकार हैं -

transitionDelay( [delay]) - इस चार्ट उदाहरण के लिए सेट (या मिलीसेकंड में) एनीमेशन संक्रमण में देरी या सेट हो जाता है।
transitionDuration( [duration]) - इस चार्ट उदाहरण के लिए एनीमेशन संक्रमण अवधि (मिलीसेकंड में) सेट या मिलती है।
useViewBoxResizing( [useViewBoxResizing]) - यदि सेट किया गया है, तो एसवीजी व्यूबॉक्स विशेषताओं के अनुसार चार्ट का आकार बदल जाता है।
controlsUseVisibility( [controlsUseVisibility]) - यदि सेट किया गया है, तो चार्ट रीसेट और फ़िल्टर नियंत्रणों को दिखाने / छिपाने के लिए प्रदर्शन विशेषता के बजाय दृश्यता विशेषता का उपयोग करता है।

अगले अध्याय में, हम capMixin को समझेंगे।