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


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


76
2017-11-20 02:36


मूल




जवाब:


प्रथम, .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(...))। तकनीकी रूप से, आप कॉल कर सकते हैं .forEach() डी 3 चयन पर, दृश्यों के पीछे से, एक डी 3 चयन अतिरिक्त कार्यों के साथ एक सरणी है (उनमें से एक है .each())। लेकिन आपको ऐसा नहीं करना चाहिए क्योंकि:

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

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

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


160
2017-11-20 04:50



बहुत उपयोगी स्पष्टीकरण, धन्यवाद! - Tyler Rick
एक महान उत्तर लिखने के लिए धन्यवाद, और बिना किसी अनावश्यक स्नैक्स सहित इसे करने के लिए जो SO पर इतना आम है ... - Kevin H. Lin
यहां एक चेतावनी होनी चाहिए: जब आपको 'इस' कीवर्ड के लिए अलग-अलग स्कोपिंग की आवश्यकता होती है लेकिन आपको अपने बुलाए गए फ़ंक्शन में डेटम की आवश्यकता नहीं है, तो चयन [0] .forEach (...) चयन से कहीं अधिक सुविधाजनक है। जो माता-पिता समारोह में 'स्वयं = यह' कामकाज की आवश्यकता होती है यदि 'यह' केवल डीओएम तत्वों का संदर्भ देने के बाहर सार्थक है। - sdupton
@sdupton के लिए scoping this कई डी 3 परिदृश्यों में एक चिंता है जहां आप उदाहरण के लिए उच्च आदेश कार्यों में गुजरते हैं selection.style("color", function(d,i) { /* here 'this' is a DOM element */ })। मेरा मानना ​​है कि आंशिक रूप से क्यों डी 3 कक्षाएं (जैसे d3.svg.axis उदाहरण के लिए) का उपयोग न करें prototype कक्षाओं को परिभाषित करने के तरीकों - पर निर्भरता से बचने के लिए एक तरीका के रूप में this। लेकिन मैं नहीं देखता कि कैसे selection[0].forEach(...) इस मुद्दे से बचाता है। क्या यह वही समस्या नहीं है? - meetamit
@ सैडप्टन, ठंडा - मुझे नहीं पता था .forEach स्कोपिंग के लिए एक दूसरा पैरा स्वीकार किया this। इसने मुझे एहसास दिलाया कि आप डी 3 के साथ समान प्रभाव प्राप्त करने के लिए कुछ समान-आश का उपयोग कर सकते हैं .each() जावास्क्रिप्ट का उपयोग करके .bind() तरीका। उदाहरण के लिए, निम्नलिखित गुंजाइश होगी this सेवा मेरे window और console.log होगा: selection.each(function() { console.log(this); }.bind(window))। - meetamit