d3 js api functions tutorial with examples
यह ट्यूटोरियल विभिन्न D3.js API फ़ंक्शन को डेटा बाइंडिंग, जॉइन, लोड और पार्स डेटा, इंटरपोलेशन आदि जैसी सुविधाओं को जोड़ने के लिए समझाता है:
D3.js एक ओपन-सोर्स जावास्क्रिप्ट डेटा विज़ुअलाइज़ेशन लाइब्रेरी है जिसमें विभिन्न एपीआई फ़ंक्शंस शामिल हैं जो CSV, XML, और JSON फॉर्मेट में डेटा बाइंडिंग, जॉइन, लोड और पार्स एक्सरसाइज़ जैसी रोमांचक विशेषताओं को जोड़ते हैं, यादृच्छिक संख्याओं, इंटरपोलेशन और टेक्स्ट में हेरफेर करते हैं। डेटा के विज़ुअलाइज़ेशन के लिए विभिन्न फ़ंक्शंस जैसे एनीमेशन, ट्रांज़िशन और ग्राफ़ बनाने के साथ स्वरूपण और अंतर्राष्ट्रीयकरण।
क्या है swf फ़ाइल इसे कैसे खोलें
आप इस पर हमारे पहले के ट्यूटोरियल का उल्लेख कर सकते हैं d3 श्रृंखला इसकी विशेषताओं, लाभों और पूर्व-आवश्यकताओं के बारे में अधिक जानने के लिए।
आप क्या सीखेंगे:
D3.js के साथ डेटा बाइंडिंग
चार्ट और ग्राफ़ जैसे डेटा विज़ुअलाइज़ेशन बनाने के लिए, किसी DOM तत्व के साथ डेटा को बाँधना या जोड़ना आवश्यक है।
डेटा एक सरणी हो सकता है जो एक कंटेनर है जिसमें समान प्रकार के संख्यात्मक मान शामिल हैं, जैसा कि नीचे प्रदर्शित किया गया है।
var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)पहला कदम एक एसवीजी ऑब्जेक्ट बनाने का होगा, जिसमें बाहरी डेटा के डेटा विज़ुअलाइज़ेशन के निर्माण के लिए एक विमान या एक फ्रेमवर्क होता है, एचटीएमएल तत्व को d3.select () के साथ चुना जाता है और एसवीजी को जोड़ता है जो विशेषताओं को जोड़कर एक कैनवास के रूप में कार्य करता है। जैसे कि कैनवास के लिए चौड़ाई और ऊंचाई।
var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)अगला चरण एसवीजी तत्व 'जी' का सम्मिलन है जो एक ऐसे समूह की तरह काम करता है जिसमें अन्य एसवीजी तत्व होते हैं।
svg.selectAll ('g')इसके अलावा, डेटा (। डेटा) फ़ंक्शन का उपयोग करके कैनवास के साथ संलग्न इस एसवीजी आकार में डेटा को बांधें या जुड़ें।
svg.selectAll ('g').data(data)अगला कदम डेटा को .data (डेटा) फ़ंक्शन के लिए (।) विधि का उपयोग करके DOM तत्वों से बाँधना है।
svg.selectAll ('g').data(data).enter()इसके अलावा, एसवीजी आकार को जोड़ दें ताकि हम आकार को कैनवास से जोड़ सकें।
svg.selectAll ('g') . data(data).enter().append('g')डेटा बाइंडिंग का एक उदाहरण नीचे दिया गया है।
var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); 
डेटा को बांधने के लिए, जो हमारे मामले में, एक निरंतर बुद्धिमान जनसंख्या घनत्व है
var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)
चर स्क्रीन को एसवीजी आकार को एचटीएमएल तत्व से जोड़कर एक ड्राइंग क्षेत्र को सौंपा गया है, जो हमारे मामले में शरीर है।
वैरिएबल स्केल स्पैन स्केल और स्केल मापदंडों को स्केल करने के लिए डोमेन और रेंज पैरामीटर्स के साथ कार्य करता है ताकि ग्राफिकल फॉर्मेट में स्केल पर वैल्यू प्रदर्शित करने के लिए ग्राफ को प्लॉट कर सकें।
.data (infoset) .enter () हमारे डेटासेट को एक वैरिएबल Infoset को असाइन करने में मदद करेगा।
डेटासेट में उनके मूल्यों के अनुरूप अलग-अलग लंबाई के आयतों के खिलाफ मूल्यों की साजिश करने के लिए पाठ को जोड़ा जाता है।
Joining, Load, And Parse Data In D3.js
D3.js बाहरी डेटा या स्थानीय रूप से विभिन्न प्रकार की फ़ाइलों से चर में लोड कर सकते हैं और इस डेटा को DOM तत्वों से जोड़ सकते हैं।
डेटा के विभिन्न प्रारूप CSV, JSON, TSV और XML हैं, जबकि d3.csv (), d3.JSON (), d3.tsv (), और d3.xml () अलग-अलग डेटा फ़ाइलों को लोड करने के लिए दिए गए संबंधित तरीके हैं। बाह्य स्रोतों से प्रारूपों को लोड करने के लिए निर्दिष्ट url के लिए एक HTTP अनुरोध भेजकर या संबंधित प्रारूपों के डेटा के साथ ही पार्स किए गए संबंधित डेटा ऑब्जेक्ट के साथ कॉलबैक फ़ंक्शन को निष्पादित करें।
CSV डेटा फ़ाइल लोड करने का सिंटैक्स नीचे दिया गया है।
d3.csv (url (, row, callback));# 1) ऊपर दिया गया पहला पैरामीटर url csv फ़ाइल का URL या सर्वर पथ है जो d3.css फ़ंक्शन द्वारा लोड की जाने वाली एक बाहरी फ़ाइल है। हमारे मामले में, यह है
http: // लोकलहोस्ट: 8080 / उदाहरण / movie_published.csv
#दो) दूसरा पैरामीटर वैकल्पिक है
# 3) तीसरा पैरामीटर कॉलबैक है जो एक फ़ंक्शन है जिसे किसी अन्य फ़ंक्शन द्वारा एक तर्क के रूप में पारित किया जा सकता है, जिससे यह सुनिश्चित हो जाता है कि विशिष्ट कोड तब तक निष्पादित हो जाता है जब तक कि कोई अन्य कोड JSON, TSV और फ़ाइल के XML प्रारूपों के लिए निष्पादित करना समाप्त नहीं करता है, फ़ंक्शन d3.csv है। क्रमशः d3.json, d3.tsv और d3.xml के साथ प्रतिस्थापित किया गया।
बाहरी डेटा पार्स करने के लिए एक उदाहरण नीचे दिया गया है।
d3.csv('movie_published.csv', function(data) { console.log(data); }); 
यदि Google Chrome ब्राउज़र में खोला जाता है, तो F12 पर क्लिक करें और पेज रिफ्रेश उस कोड से कंसोल लॉग प्रदर्शित करेगा, जो हमारे मामले में कंसोल है। (डेटा), जो डेटा सेट से मान प्रदर्शित करेगा, जिसमें कॉलम हेड, मूवी_नाम और वर्ष होगा। सर्वर स्थान पर रखी गई CSV फ़ाइल से प्रदर्शित किया जाएगा।
D3.js में रैंडम नंबर को जोड़ते हुए
डी 3 - यादृच्छिक एपीआई विधियाँ विभिन्न संभाव्यता वितरणों से यादृच्छिक संख्याओं की वापसी करती हैं, जो कि एक गणितीय कार्य है, जो विभिन्न परिणामों की घटनाओं की संभावना की गणना करता है।
ये कार्य मुख्य रूप से मठ का उपयोग करते हैं। जावास्क्रिप्ट का यादृच्छिक कार्य जो उन संख्याओं का उत्पादन करता है जो न्यूनतम और अधिकतम सीमा के बीच की संख्या को निर्दिष्ट करता है, इसका परिणाम हर बार मठ में एक अद्वितीय संख्या में होता है। यादृच्छिक कार्य निष्पादित हो जाता है।
- d3.randomUniform - एक समान वितरण से यादृच्छिक संख्या उत्पन्न करें। जैसे d3.randomUniform (1, 2) () - 1 के समावेशी और 2 से कम यादृच्छिक संख्या लौटाएगा।
- d3.randomNormal - सामान्य वितरण से यादृच्छिक संख्या उत्पन्न करें, जैसे d3.randomNormal (1, 2) () - एक पूर्णांक संख्या लौटाएगा जो एक निर्दिष्ट न्यूनतम मान और अधिकतम मानों के बीच है।
- d3.randomLogNormal - लॉग-सामान्य वितरण से यादृच्छिक संख्या उत्पन्न करें, और यादृच्छिक चर के लिए अपेक्षित मान प्राकृतिक लॉगरिदम मान होगा।
- d3.randomBates - स्वतंत्र चर के साथ, एक बेट्स वितरण से यादृच्छिक संख्या उत्पन्न करें।
- d3.randomIrwinHall - इरविन-हॉल वितरण से यादृच्छिक संख्या उत्पन्न करें।
- d3.randomExponential - एक घातांक वितरण से यादृच्छिक संख्या उत्पन्न करें।
डी 3 में यादृच्छिक कार्यों का उदाहरण
Random Functions in d3 Random Functions in d3
document.write(d3.randomUniform(1, 2)() +''); document.write(d3.randomNormal(1, 2)()+'
'); document.write(d3.randomLogNormal(1, 2)()+'
'); document.write(d3.randomBates(1, 2)()+'
'); document.write(d3.randomIrwinHall(1, 2)()+'
'); document.write(d3.randomExponential(1, 2)()+'
');
डी 3 में अंतर
दो यादृच्छिक मूल्यों के बीच अंतर करने के लिए लागू एपीआई तरीके अंतिम मूल्य बी के प्रकार पर निर्भर करेंगे, सामान्य वाक्यविन्यास है d3.interpolate (ए, बी)। नीचे दी गई तालिका एक तालिका है जो डेटा प्रकारों के अंतिम मूल्य बी, और संबंधित विधि या फ़ंक्शन को सूचीबद्ध करती है जो डेटा प्रकार के अनुसार बदल जाएगी।
| अंत मूल्य का प्रकार बी | विधि नाम का उपयोग किया |
|---|---|
| यदि b एक सामान्य सरणी है | इंटरपोलेट्रे () |
| यदि बी बुलियन, अशक्त या अपरिभाषित है | लगातार बी का उपयोग किया जाएगा |
| यदि b एक संख्या है | इंटरपोलनेटरी () |
| यदि b एक रंग या स्ट्रिंग है जो रंग को संदर्भित करता है | इंटरपोलेटबर्ग () |
| अगर b एक तारीख है | इंटरपोलेट () |
| अगर b एक तार है | इंटरपोलेटस्ट्रिंग () |
| यदि बी संख्या का एक प्रकार है | इंटरपोलनेटरीअरे () |
| यदि b संख्या की बात कर रहा है | इंटरपोलनेटरी () |
| नई तो | इंटरपोलेट ऑबजेक्ट () |
नीचे दिए गए उदाहरण बताते हैं:
- d3.interpolateNumber (10) स्टार्ट वैल्यू और अंतिम मान 20 के रूप में 10 के साथ कार्य करता है, वैल्यू स्टार्ट वैल्यू 10 से एंड वैल्यू 20 से इंटरपोलेट परमर्स के लिए (0.0) से (0.5) तक (1.0) तक प्रदर्शित होता है।
- d3.interpolateRgb () दो अलग-अलग रंग नामों के लिए कार्य करता है, जिसके परिणामस्वरूप संबंधित आरजीबी (’r’, 'g', 'b') परिणाम होते हैं, (०.०) से (०.५) तक (१.०) तक इंटरपोलेट पाराम के लिए
- d3.interpolateDate () प्रारूप में दो अलग-अलग तिथियों के लिए कार्य y yyyy-mm-dd hh: mm: ss ’, उपरोक्त तिथि सीमा के बीच की तारीखों को प्रदर्शित करेगा, (0.0) (1.0) (1.0) से प्रक्षेपित पारामों के लिए
रेंज के बीच संख्याओं, रंगों और तारीखों के लिए प्रक्षेप का एक उदाहरण नीचे दिया गया है।
Interpolate Numbers, Colors and Dates
var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + ''); document.write(inpolat(0.2)+ '
'); document.write(inpolat(0.5) + '
'); document.write(inpolat(1.0)+ '
'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '
'); document.write(inpolcolrs(0.2)+ '
'); document.write(inpolcolrs(0.5)+ '
'); document.write(inpolcolrs(0.8)+ '
'); document.write(inpolcolrs(1.0)+ '
'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '
'); document.write(inpoldates(0.2)+ '
'); document.write(inpoldates(0.5)+ '
'); document.write(inpoldates(0.8)+ '
'); document.write(inpoldates(1.0)+ '
');
पाठ स्वरूपण और अंतर्राष्ट्रीयकरण के साथ D3.js
पाठ स्वरूपण और स्थानीयकरण को संख्या प्रारूप के साथ D3.js में प्राप्त किया जा सकता है, उदाहरणों के साथ नीचे दिए गए प्रारूप के अनुसार दिनांक स्वरूप और स्थानीय कार्य।
डी 3 - स्थानीय ()
d3.locale (परिभाषा), डिफ़ॉल्ट रूप से परिभाषा के लिए विशिष्ट स्थान लौटाएगा, डिफ़ॉल्ट रूप से, स्थानीय परिभाषा d3.locale (परिभाषा) के लिए U.S. अंग्रेजी है,
सर्वश्रेष्ठ साइटों को ऑनलाइन देखने के लिए मोबाइल फोनों के लिए
स्थानीय परिभाषा के लिए संख्या स्वरूपण के गुण नीचे सूचीबद्ध हैं।
- दशमलव: दशमलव बिंदु आमतौर पर 25.75 जैसी मुद्राओं में लागू किया जाता है ( जैसे '।')।
- हजारों: हजार एक पहचानकर्ता या एक विभाजक है जिसे 2,475 (जैसे हजार मानों के बाद अल्पविराम के रूप में प्रयोग किया जाता है) जैसे ',')।
- समूहीकरण: हर समूह और आकार के लिए Array का समूह Arrayname (5) का उपयोग करके जांचा जा सकता है, जहां 5 एक सूचकांक है और सरणी आकार 6 सदस्य है।
- मुद्रा: मुद्रा स्ट्रिंग्स के लिए उपसर्ग और प्रत्यय ( जैसे ('$', ''))।
- दिनांक और समय: दिनांक और समय (% c) प्रारूप में दिनांक और समय होगा ( जैसे '% A% b% e% X% Y')।
- तारीख: तारीख (% x) ( जैसे महीना दिवस और वर्ष में '% m /% d /% Y') प्रारूप स्ट्रिंग।
- समय: समय (% X) ( जैसे '% H:% M:% S') स्वरूप मिनट और सेकंड में स्ट्रिंग।
- अवधि: लोकल के ए.एम. और पी.एम. समकक्ष ( जैसे ('दोपहर से पूर्व दोपहर के बाद'))।
- दिन: सप्ताह के दिन, रविवार से शुरू होते हैं, वर्णमाला में।
- शॉर्ट्स: रविवार से शुरू होने वाले कार्यदिवसों के संक्षिप्त दिन या संक्षिप्त नाम जैसे कि SUN, MON, इत्यादि।
- महीने: अक्टूबर के रूप में महीने का पूरा नाम (जनवरी से शुरू)
- शॉर्टमार्ट्स: संक्षिप्त महीने या संक्षिप्त नाम जैसे महीने के JAN, FEB, MAR, आदि (जनवरी से शुरू)।
ऊपर वर्णित सभी मापदंडों को निम्न छवि में उनके संबंधित मूल्यों के साथ चर के रूप में प्रदर्शित किया जाता है।
डी 3.फॉर्मेट
जावास्क्रिप्ट पुस्तकालय से d3.format एक इनपुट तर्क के रूप में एक संख्या लेता है, वाक्यविन्यास d3.format (स्पेसियर) है, संख्याओं को बदलने के लिए, d3.format का उपयोग किया जाता है।
डी 3 पर आधारित प्रारूप लागू करने का एक उदाहरण नीचे दिया गया है।
Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); }); 
D3.js के साथ दिनांक प्रारूप के साथ संशोधन
D3.js लाइब्रेरी का उपयोग करते हुए समय प्रारूपण, जहां d3.timeParse को वाइल्ड कार्ड वर्णों के साथ लागू किया जा सकता है अर्थात् नियमित अभिव्यक्ति जो इनपुट समय प्रारूप को वांछित प्रारूप में बदलने में मदद करती है।
समय और दिनांक से संबंधित प्रारूप का एक उदाहरण नीचे दिया गया है।
body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +''); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'
'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'
'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'
'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'
'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'
');
निष्कर्ष
इस ट्यूटोरियल में, हमने डेटा बाइंडिंग जैसे डी 3 के सभी शेष आवश्यक तरीकों को कवर किया है, जहाँ एक एरे के रूप में डेटा और ज्वाइन, लोड के साथ-साथ पार्स डेटा सीएसवी, जेएसएन और एक्सएमएल प्रारूप में है।
हमने चार्ट या ग्राफ़ में डेटा समूहों की कल्पना करने के लिए यादृच्छिक संख्याओं और प्रक्षेप विधि का उपयोग करते हुए हेरफेर पर चर्चा की, और संख्याओं, दिनांक, समय और विभिन्न स्थानीय मुद्राओं के लिए d3.locale विधियों का उपयोग करके प्रारूप और पाठ का स्थानीयकरण किया।
अनुशंसित पाठ
- जावास्क्रिप्ट इंजेक्शन ट्यूटोरियल: वेबसाइट पर टेस्ट और जेएस इंजेक्शन हमलों को रोकें
- विस्तृत उत्तरों के साथ टॉप 45 जावास्क्रिप्ट साक्षात्कार प्रश्न
- 2021 में 10 सर्वश्रेष्ठ एपीआई परीक्षण उपकरण (SOAP और REST API परीक्षण उपकरण)
- एपीआई परीक्षण ट्यूटोरियल: शुरुआती के लिए एक पूर्ण गाइड
- बाकी एपीआई प्रतिक्रिया कोड और बाकी अनुरोधों के प्रकार
- बीडीडी दृष्टिकोण का उपयोग करके ककड़ी के साथ रीस्ट एपीआई परीक्षण
- बाकी एपीआई ट्यूटोरियल: बाकी एपीआई वास्तुकला और बाधाओं
- शीर्ष 10 सर्वश्रेष्ठ एपीआई प्रबंधन उपकरण फ़ीचर तुलना के साथ
- शीर्ष 20 सबसे महत्वपूर्ण एपीआई परीक्षण साक्षात्कार प्रश्न और उत्तर