इसे अज्ञात फ़ंक्शन कहा जाता है, जो एक ऐसा फ़ंक्शन है जिसे नामित लेबल नहीं दिया जाता है। जावास्क्रिप्ट में बेनामी फ़ंक्शंस अन्य सभी चीज़ों की तरह ऑब्जेक्ट्स हैं और यही कारण है कि आप उन्हें अन्य जावास्क्रिप्ट कार्यों में पैरामीटर के रूप में पास कर सकते हैं।
डी 3 के मामले में, यह आपको दूसरे पैरामीटर के रूप में फ़ंक्शन में पास करने की अनुमति देता है। जैसा कि आपने पाया है, इस फ़ंक्शन को वर्तमान डेटा तत्व के साथ-साथ वर्तमान डेटा तत्व की अनुक्रमणिका के साथ भी बुलाया जाएगा। यदि दूसरा पैरामीटर फ़ंक्शन नहीं है, तो यह इसके बजाय एक मान का उपयोग कर सकता है।
अपने उदाहरण में:
d3.selectAll("circle")
.attr("cy",function (d) { return percent_scale(d.late_percent);})
.attr("cx",function (d) { return time_scale(d.time);})
.attr("r",1);
दोनों cy और cx हैं एक गुमनाम समारोह कॉल के रिटर्न मान के आधार पर असाइन मान जा रहा है, जबकि r एक स्थिर मूल्य सौंपा जा रहा है।
function setY(d) { return percent_scale(d.late_percent);}
function setX(d) { return time_scale(d.time); }
d3.selectAll("circle")
.attr("cy", setY)
.attr("cx", setX)
.attr("r",1);
यहाँ मैं गुमनाम समारोह बदल दिया है और अधिक मानक समारोह परिभाषा के साथ कॉल करता है और निर्दिष्ट समारोह के नाम d3 कॉल में कहा जा: हम इस के रूप में फिर से लिखने सकता है। यह ठीक पहले जैसा ही काम करता है। यह भी ध्यान रखें कि इस मामले में d के बारे में जादुई कुछ भी नहीं है।
function setY(foo) { return percent_scale(foo.late_percent);}
function setX(foo) { return time_scale(foo.time); }
d3.selectAll("circle")
.attr("cy", setY)
.attr("cx", setX)
.attr("r",1);
यह कोड भी वही काम करेगा। ध्यान दें कि मैंने d से foo पर पैरामीटर का नाम बदल दिया है, लेकिन यह केवल फ़ंक्शन के भीतर पैरामीटर तक पहुंचने के तरीके को बदलता है। फ़ंक्शन कॉल के बाहर इसका कोई प्रभाव नहीं पड़ता है। आम तौर पर d3 दस्तावेज़ीकरण और ट्यूटोरियल में, आप वर्तमान डेटा तत्व के लिए उपयोग किए गए d और वर्तमान डेटा तत्व के सूचकांक के लिए उपयोग किए गए i देखेंगे। सूचकांक तो जैसे समारोह कॉल करने के लिए दूसरा तत्व के रूप में में पारित हो जाता है:
function setY(d, i) { return percent_scale(d.late_percent);}
function setX(d, i) { return time_scale(d.time); }
d3.selectAll("circle")
.attr("cy", setY)
.attr("cx", setX)
.attr("r",1);
अब विशेष रूप से d3 मामले में:
// Select all of the 'circle' elements (that is <circle>) elements
// in the HTML document and put the associated data into an array
d3.selectAll("circle")
// For each circle element, set the Y position to be the result
// of calling percent_scale on the data element late_percent
.attr("cy",function (d) { return percent_scale(d.late_percent);})
// For each circle element, set the X position to be the result
// of calling time_scale on the data element time
.attr("cx",function (d) { return time_scale(d.time);})
// For each circle element, set the radius to be 1
.attr("r",1);
यह d3 में एक बहुत ही आम निर्माण है। पहला चरण हमेशा यह निर्धारित करने के लिए चयन करना है कि आप किस तत्व को संशोधित करना चाहते हैं (यह इस मामले में चयन करें।)। इसके बाद, आप अतिरिक्त कॉल (इस मामले में .attr कॉल) को एक साथ जोड़ सकते हैं जो वास्तव में तत्वों में वांछित संशोधन करते हैं।
यह डेटा तत्वों को मैन्युअल रूप से ट्रैक किए बिना या बहुत सारे लूप बनाने के बिना डेटा संचालित दस्तावेज़ों (जैसे ग्राफ, चार्ट इत्यादि) के साथ काम करने का एक बहुत ही शक्तिशाली तरीका बनाता है। असल में, आप आमतौर पर बता सकते हैं कि d3 गलत तरीके से उपयोग कर रहे हैं यदि आपके पास कोड में कोई लूप है जो संशोधित तत्वों से संबंधित है।
यदि आपके पास जावास्क्रिप्ट के साथ अधिक अनुभव नहीं है, तो https://www.dashingd3js.com/ पर ट्यूटोरियल d3 के साथ प्रारंभ करने में सहायक हो सकते हैं।
विस्तृत स्पष्टीकरण के लिए धन्यवाद! – user3562812