2013-06-27 12 views
10

प्रत्येक डी 3 जेएस शुरुआती इस विचार से गुज़रना होगा, मुझे इसके बारे में बहुत यकीन है।फ़ंक्शन (डी) और फ़ंक्शन (डी, i) के बीच अंतर?

मैं अब कुछ घंटों के लिए इस चीज़ के आसपास रहा हूं !!!! लेकिन मुझे नहीं पता कि इसका उपयोग कैसे किया जाए और अंतर उनके बीच क्या है?

function(d){return d} 

function(d,i){return d and some more custom code} 
उदाहरण --->

वर डेटा के लिए

= [4, 8, 15, 16, 23, 42];

Function(d)::::: 

    chart.selectAll("div") 
     .data(data) 
     .enter().append("div") 
     .style("width", function(d) { return d * 10 + "px"; }) 
     .text(function(d) { return d; }); 

    ------------------------------------------------------------------------------------ 

Function(d*i)::::: 

    chart.selectAll("rect") 
     .data(data) 
     .enter().append("rect") 
     .attr("y", function(d, i) { return i * 20; }) 
     .attr("width", x) 
     .attr("height", 20); 
+0

ठीक है, वे अलग-अलग चीजें कर रहे हैं? यदि आप हमें उस संदर्भ के बारे में नहीं बताते जिसमें उनका उपयोग किया जाता है (एक कॉल उदाहरण), हम ज्यादा व्याख्या नहीं कर पाएंगे? – Bergi

+0

मैं एक सामान्य सवाल पूछ रहा हूँ !!! उदाहरण के साथ बस एक छोटा सा बुनियादी स्पष्टीकरण होगा। मैं उन कार्यक्रमों के माध्यम से जा रहा हूं जहां मैं इसे अक्सर देखता हूं। तो बस बुनियादी सामान्य स्पष्टीकरण करेंगे !!! –

+0

खैर, सामान्य उत्तर यह है कि दूसरा कार्य पहले से अधिक करता है। यदि आप हमें नहीं बताते हैं * कहां * कुछ कार्यक्रमों में आपने इसे देखा है, तो हम बेहतर नहीं कर सकते हैं (या नीचे nnnnn की तरह अनुमान लगाना है) – Bergi

उत्तर

9

आपका उदाहरण दोनों के बीच अंतर का एक अच्छा व्याख्याता हैं।

पहले उदाहरण में, केवल d का उपयोग किया जाता है। d किसी दिए गए चयन से जुड़े डेटा का प्रतिनिधित्व करता है। इस मामले में, चयनित div तत्वों की एक सरणी बनाया जाता है, एक data सरणी में प्रत्येक तत्व के लिए:

chart.selectAll("div") 
    .data(data) 
    .enter() 
    .append("div") 

यह न केवल div तत्वों की एक सरणी बनाता है, लेकिन उन तत्वों में से प्रत्येक के डेटा को संबंधित। यह data सरणी में एक तत्व के अनुरूप प्रत्येक div के साथ एक-से-एक आधार पर किया जाता है। एक '4' से जुड़ा हुआ है, एक '8' के साथ, और इसी तरह से।

अगर मैं तो चयन की सरणी पर .text(function(d){...}) का उपयोग करने पर जाना है, d प्रत्येक चयनित div से संबद्ध डेटा का उल्लेख होगा, इसलिए अगर मैं अपने चयन पर निम्न विधि का उपयोग:

.text(function(d) { return d; }); 

से प्रत्येक मेरे div एस में टेक्स्ट जोड़ा जाएगा, जिसका मान d है, या तत्व से जुड़े डेटा हैं।

जब चयन की एक सरणी बनाई जाती है, तो उन्हें सरणी में एक अनुक्रमणिका भी दी जाती है। आपके उदाहरण में, यह डेटा सरणी में उनके डेटा की स्थिति से मेल खाता है। यदि आपका फ़ंक्शन d और i दोनों का अनुरोध करता है, तो i इस अनुक्रमणिका से मेल खाएगा। हमारे div एस पर वापस जाकर, '4' से जुड़े div में '0' की अनुक्रमणिका होगी, '8' में '1' की अनुक्रमणिका होगी, और इसी तरह।

यह भी ध्यान रखना महत्वपूर्ण है कि अनुरोध किए गए चर में उपयोग किए गए चरित्र से कोई फर्क नहीं पड़ता। फ़ंक्शन कॉल में पहला चर हमेशा डेटा होता है, और दूसरा सूचकांक होता है। अगर मैं

की तरह एक विधि का इस्तेमाल किया
.text(function(cat,moose){ return("data is: " + cat + " index is: " + moose)}) 

cat चयन के डेटा के अनुरूप होगा, और moose सूचकांक के अनुरूप होगा।

+0

बहुत अच्छा और अच्छा जवाब! – Naxos84

1

आप कॉलबैक कार्यों आप .attr() तरह के तरीकों को मिलेगा, तो समारोह वर्तमान चयन, जहां i आप वर्तमान आइटम के सूचकांक देता है में प्रत्येक आइटम के लिए कहा जाता है के बारे में बात कर रहे हैं, लेकिन आप जो कर रहे हैं उसके आधार पर आपको इंडेक्स की परवाह नहीं है। इसलिए हालांकि D3.js हमेशा आपके फ़ंक्शन को दोनों तर्कों के साथ कॉल करेगा, अगर आपको किसी विशेष मामले में दूसरे तर्क की आवश्यकता नहीं है तो आपके फ़ंक्शन को इसे स्पष्ट रूप से घोषित करने की आवश्यकता नहीं है।

जावास्क्रिप्ट आपको किसी भी समारोह के साथ किसी भी फ़ंक्शन को कॉल करने देता है, भले ही फ़ंक्शन घोषणा में कितने स्पष्ट रूप से शामिल किए गए हों। यदि आप परिभाषित किए गए कम तर्क वाले फ़ंक्शन को कॉल करते हैं तो बचे हुए मूल्य undefined प्राप्त करेंगे। यदि आप परिभाषित किए गए अधिक तर्कों के साथ फ़ंक्शन को कॉल करते हैं तो आप arguments object का उपयोग करके फ़ंक्शन के भीतर से अतिरिक्त लोगों तक पहुंच सकते हैं - या आप उन्हें अनदेखा कर सकते हैं।

(नोट:। आप function() में एक लोअरकेस f होना चाहिए)

5

मुझे आशा है कि यह उदाहरण आपकी मदद कर सकता है।

<!doctype html> 
<meta charset="utf-8"> 
<title>my first d3</title> 
<body> 

<script> 
    var data=[10,20,30,40]; 

    var lis = d3.select("body") 
       .append("ul") 
       .selectAll("li") 
       .data(data) 

    lis.enter() 
    .append("li") 
    .text(function(d,i){ return "item n° "+i+" has value: "+d}) 
</script> 

मूल रूप से d डेटा का मूल्य है, और i उसकी सूचकांक है: यह एक पूरा वेब पेज जहां आप खेलना शुरू कर सकते हैं। आप इस उदाहरण को यहां देख सकते हैं: http://jsfiddle.net/M8nK8/

+1

आपके प्रयास के लिए एक upvote !!! thanx –

संबंधित मुद्दे