डी 3 जावास्क्रिप्ट फोरैच के बीच अंतर और प्रत्येक

Question

डी 3 जेएस में forEach और each के बीच क्या अंतर है?

Answer 1

पहला, .forEach() डी 3 का हिस्सा नहीं है, यह जावास्क्रिप्ट सरणी का मूल कार्य है। तो,

["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); }); 
// Outputs: 
a 0 
b 1 
c 2 

और यह तब भी काम करता है जब पृष्ठ पर डी 3 लोड नहीं होता है।

अगला, डी 3 का .each() डी 3 चयनों पर काम करता है (आपको d3.selectAll(...) पर क्या मिलता है)। तकनीकी रूप से, आप डी 3 चयन पर .forEach() पर कॉल कर सकते हैं, दृश्यों के पीछे से, एक डी 3 चयन अतिरिक्त कार्यों के साथ एक सरणी है (उनमें से एक .each() है)। लेकिन आपको ऐसा नहीं करना चाहिए क्योंकि:

1. ऐसा करने से वांछित व्यवहार नहीं होगा। किसी भी वांछित व्यवहार के उत्पादन के लिए .forEach() को डी 3 चयन के साथ कैसे उपयोग करना है, उसे डी 3 के आंतरिक कार्यों की अंतरंग समझ की आवश्यकता होगी। तो ऐसा क्यों करें, अगर आप एपीआई के दस्तावेज, सार्वजनिक भाग का उपयोग कर सकते हैं।

2. जब आप एक d3 चयन पर .each(function(d, i) { }) फोन, तुम बस d और i की तुलना में अधिक मिलता है: समारोह में इस तरह लागू किया जाता है कि this कीवर्ड कहीं भी d के साथ जुड़े एचटीएमएल DOM एलीमेंट का कि समारोह अंक के अंदर। दूसरे शब्दों में console.log(this)function(d,i) {} से <div class="foo"></div> या जो भी HTML तत्व है, उसे लॉग करेगा। और यह उपयोगी है, क्योंकि तब आप इस this ऑब्जेक्ट पर फ़ंक्शन को कॉल कर सकते हैं ताकि क्रमशः इसके सीएसएस गुण, सामग्री या जो भी हो। आमतौर पर, आप d3.select(this).style('color', '#c33'); में इन गुणों को सेट करने के लिए d3 का उपयोग करते हैं। d, this और i:

मुख्य टेकअवे कि, .each() का उपयोग कर आप 3 चीजें आप की जरूरत तक पहुँच प्राप्त है। .forEach() के साथ, एक सरणी (जैसे शुरुआत से उदाहरण में) आपको केवल 2 चीजें (d और i) मिलती हैं, और आपको उन 2 चीजों के साथ HTML तत्व को संबद्ध करने के लिए काम का एक गुच्छा करना होगा। और, अन्य बातों के साथ, डी 3 उपयोगी कैसे है।