डी 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 लोड न हो।

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

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

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

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

Comments

एक महान उत्तर लिखने के लिए धन्यवाद, और बिना किसी अनावश्यक स्नार्क को शामिल किए बिना ऐसा करने के लिए एसओ पर इतना आम है ...

— केविन एच। लिन

यहां एक चेतावनी होनी चाहिए: जब आपको 'इस' कीवर्ड के लिए अलग-अलग स्कोपिंग की आवश्यकता होती है, लेकिन आपको अपने बुलाए गए फ़ंक्शन में डेटा की आवश्यकता नहीं है, तो चयन [0] .forEach (...) चयन की तुलना में बहुत अधिक सुविधाजनक है। जो मूल तत्व के संदर्भ में 'आत्म' = 'यह' को जरूरी मानता है, अगर यह '' मात्र '' '' '' '' '' '' '' '' तत्व के तत्वों से बाहर है।

— sdupton

@ sdupton के लिए डोपिंग thisकई d3 परिदृश्यों में एक चिंता का विषय है जहाँ आप उच्च क्रम वाले कार्यों में गुजरते हैं, उदाहरण के लिए selection.style("color", function(d,i) { /* here 'this' is a DOM element */ })। मेरा मानना ​​है कि आंशिक रूप से क्यों d3 कक्षाएं ( d3.svg.axisउदाहरण के लिए) prototypeवर्गों को परिभाषित करने के तरीकों का उपयोग नहीं करती हैं - पर निर्भरता से बचने के तरीके के रूप में this। लेकिन मैं यह नहीं देखता कि selection[0].forEach(...)इस मुद्दे से कैसे बचा जाए। क्या यह वही समस्या नहीं है?

— मीटमैट

@meetamit आप Array.prototype.forEach में उपयोग के लिए स्पष्ट रूप से 'इस' को स्कोप कर सकते हैं, प्रत्येक तत्व पर कॉल किए जाने वाले फ़ंक्शन के बाद पारित किया गया। जब आप ऑब्जेक्ट-ओरिएंटेड रैपर (मैं ES6 क्लासेस का उपयोग कर रहा हूं) से मिलता-जुलता कुछ भी लिख रहा हूं, तो 'यह' का स्पष्ट रूप से खोना एक निंदनीय हो सकता है।

— sdupton

@ sdupton, cool - मुझे नहीं पता था कि स्कूपिंग के .forEachलिए एक 2 पैरा स्वीकार किया गया था this। इसने मुझे एहसास दिलाया कि आप .each()जावास्क्रिप्ट के .bind()तरीके का उपयोग करके d3 के साथ समान प्रभाव प्राप्त करने के लिए कुछ समान-ईश का उपयोग कर सकते हैं । उदाहरण के लिए, निम्नलिखित इच्छा दायरे thisको windowऔर यह console.log जाएगा: selection.each(function() { console.log(this); }.bind(window))।

— मीटमाइट