ডি 3 জজে forEachএবং এর eachমধ্যে পার্থক্য কী ?
উত্তর:
প্রথমত, .forEach()ডি 3 এর অংশ নয়, এটি জাভাস্ক্রিপ্ট অ্যারেগুলির একটি স্থানীয় কাজ। সুতরাং,
["a", "b", "c"].forEach(function(d, i) { console.log(d + " " + i); });
// Outputs:
a 0
b 1
c 2
পৃষ্ঠায় d3 লোড না করা সত্ত্বেও এটি কাজ করে।
এরপরে, ডি 3 এর .each()ডি 3 নির্বাচনগুলিতে কাজ করে (আপনি যখন পাবেন তখন d3.selectAll(...))। প্রযুক্তিগতভাবে, আপনি .forEach()একটি ডি 3 নির্বাচন করতে কল করতে পারেন , যেহেতু পর্দার পিছনে, একটি ডি 3 নির্বাচন অতিরিক্ত ফাংশন সহ একটি অ্যারে (যার মধ্যে একটি .each())। তবে আপনার এটি করা উচিত নয় কারণ:
এটি করলে পছন্দসই আচরণ হয় না not যে .forEach()কোনও পছন্দসই আচরণ উত্পাদন করতে ডি 3 নির্বাচনের সাহায্যে কীভাবে ব্যবহার করতে হয় তা জানতে ডি 3 এর অভ্যন্তরীণ কার্যকারিতা সম্পর্কে অন্তরঙ্গ বোঝা দরকার। সুতরাং কেন এটি করুন, আপনি যদি API এর ডকুমেন্টেড, পাবলিক অংশটি ব্যবহার করতে পারেন।
আপনি কল যখন .each(function(d, i) { })একটি D3 নির্বাচনের উপর, আপনি শুধু চেয়ে আরো পেতে dএবং i: ফাংশন যেমন প্রার্থনা পরার যে thisসঙ্গে যুক্ত এইচটিএমএল DOM উপাদান যে ফাংশন পয়েন্ট ভিতরে শব্দ যে কোন জায়গায় d। অন্য কথায় console.log(this)ভিতরে থেকে কিছু HTML বা উপাদান যাই হোক না কেন function(d,i) {}লগইন করবে <div class="foo"></div>। এবং এটি দরকারী, কারণ তারপরে আপনি এই thisবস্তুর ফাংশনটি কল করতে পারেন যাতে এটির সিএসএস বৈশিষ্ট্য, সামগ্রী বা যে কোনও কিছুই পরিবর্তন করতে পারে। সাধারণত, আপনি এই বৈশিষ্ট্যগুলি সেট করার জন্য ডি 3 ব্যবহার করেন d3.select(this).style('color', '#c33');।
প্রধান takeaway হয় যে ব্যবহার করছে, .each(): আপনি 3 জিনিষ অ্যাক্সেস পেতে আপনার যা দরকার d, thisএবং i। সাথে .forEach(), একটি অ্যারেতে (যেমন প্রথম থেকেই উদাহরণস্বরূপ) আপনি কেবল 2 টি জিনিস ( dএবং i) পান এবং আপনাকে এই 2 টি বিষয়ের সাথে এইচটিএমএল উপাদান যুক্ত করতে অনেকগুলি কাজ করতে হবে। এবং এটি, অন্যান্য বিষয়ের মধ্যে, ডি 3 কীভাবে দরকারী।
thisহ'ল অনেক ডি 3 পরিস্থিতি যেখানে আপনি উচ্চতর অর্ডার ফাংশনগুলিতে উদাহরণস্বরূপ পাস করেন সেখানে উদ্বেগ selection.style("color", function(d,i) { /* here 'this' is a DOM element */ })। আমি বিশ্বাস করি যে আংশিকভাবে কেন ডি 3 ক্লাস ( d3.svg.axisউদাহরণস্বরূপ) prototypeক্লাস সংজ্ঞায়নের পদ্ধতিগুলি ব্যবহার না করে - নির্ভরতা এড়ানোর উপায় হিসাবে this। তবে আমি দেখতে পাচ্ছি না যে selection[0].forEach(...)এই সমস্যাটি কীভাবে এড়ানো যায়। এটা কি একই সমস্যা নয়?
.forEachজন্য ২ য় পরম গৃহীত হয়েছিল this। এটি আমাকে বুঝতে পেরেছিল যে আপনি .each()জাভাস্ক্রিপ্টের .bind()পদ্ধতি ব্যবহার করে ডি 3 এর সাথে একই প্রভাব অর্জনের জন্য অনুরূপ কিছু ব্যবহার করতে পারেন । উদাহরণস্বরূপ, নিম্নলিখিত ইচ্ছার সুযোগ thisথেকে windowএবং এটি console.log হবে: selection.each(function() { console.log(this); }.bind(window))।