কেউ দয়া করে D3.js তে ডেটাম () এবং ডেটা () এর মধ্যে পার্থক্যটি ব্যাখ্যা করতে পারেন? আমি উভয়ই ব্যবহৃত হচ্ছে দেখছি এবং আমি নিশ্চিত নই যে কেন আপনি অন্যের থেকে একটি বেছে নেবেন?
কেউ দয়া করে D3.js তে ডেটাম () এবং ডেটা () এর মধ্যে পার্থক্যটি ব্যাখ্যা করতে পারেন? আমি উভয়ই ব্যবহৃত হচ্ছে দেখছি এবং আমি নিশ্চিত নই যে কেন আপনি অন্যের থেকে একটি বেছে নেবেন?
উত্তর:
আমি এখানে মাইকের কাছ থেকে সঠিক উত্তরটি পেয়েছি:
ডি 3 - জেএসওএন ডেটা স্ট্রাকচারগুলি কীভাবে মোকাবেলা করবেন?
আপনি যদি কোনও একক এসভিজি উপাদানগুলিতে আপনার ডেটা বাঁধতে চান তবে ব্যবহার করুন
(...).data([data])অথবা
(...).datum(data)আপনি যদি একাধিক এসভিজি উপাদানগুলিতে আপনার ডেটা আবদ্ধ করতে চান
(...).data(data).enter().append("svg").....
enter(), ডি 3 নতুন তৈরি এসভিজি উপাদানগুলির সাথে বিশিষ্ট অ্যারে উপাদানগুলিকে আবদ্ধ করবে।
এটিকে কিছুটা দেখার পরে, আমি দেখতে পেয়েছি যে এসও তে এখানে উত্তরগুলি সম্পূর্ণ হয় নি কারণ আপনি যখন অনুরোধ করেন selection.dataএবং selection.datumকোনও ইনপুট dataপ্যারামিটার দিয়ে কেবল তখনই কেসটি কভার করেন । এমনকি সেই দৃশ্যেও, নির্বাচনটি একক উপাদান বনাম যখন এতে একাধিক উপাদান থাকে তবে দুটি পৃথকভাবে আচরণ করে। তদুপরি, এই দুটি পদ্ধতিতে কোনও ইনপুট আর্গুমেন্ট ছাড়াইও অনুরোধ করা যেতে পারে যাতে বাছাইয়ের ক্ষেত্রে আবদ্ধ ডেটা / ডাটামকে জিজ্ঞাসা করা যায়, এক্ষেত্রে তারা আবার আলাদাভাবে আচরণ করে এবং বিভিন্ন জিনিস ফিরিয়ে দেয়।
সম্পাদনা করুন - আমি এখানে এই প্রশ্নের আরও কিছুটা বিস্তারিত উত্তর পোস্ট করেছি, তবে নীচের পোস্টে দুটি পদ্ধতি এবং তারা একে অপরের থেকে কীভাবে আলাদা সে সম্পর্কিত সমস্ত মূল পয়েন্টগুলি ক্যাপচার করেছে।
ইনপুট আর্গুমেন্টdata হিসাবে সরবরাহ করার সময়
selection.data(data)উপাদান মধ্যে যোগদান তথ্য একটি সঞ্চালন করার প্রচেষ্টা করা হবে dataনির্বাচন সৃষ্টির ফলে সঙ্গে অ্যারে enter(), exit()এবং update()পছন্দসই মান নির্বাচন করে আপনি পরবর্তীকালে উপর কাজ করতে পারে। এর শেষ ফলাফলটি যদি আপনি কোনও অ্যারে পাস করেন data = [1,2,3]তবে নির্বাচনের সাথে প্রতিটি পৃথক ডেটা এলিমেন্টে (অর্থাৎ ড্যাটুম) যোগদানের চেষ্টা করা হবে। নির্বাচনের প্রতিটি উপাদানটির সাথে dataআবদ্ধ একটি মাত্র ডেটাম উপাদান থাকবে।
selection.datum(data)ডেটা-জয়েন প্রক্রিয়া পুরোপুরি বাইপাস করে। এটি কেবলমাত্র dataডেটা-জয়েনের ক্ষেত্রে বিভাজন ছাড়াই সামগ্রিকভাবে নির্বাচনের সমস্ত উপাদানগুলির সম্পূর্ণতা নির্ধারণ করে । সুতরাং আপনি যদি নিজের data = [1, 2, 3]প্রতিটি ডিওএম উপাদানকে একটি সম্পূর্ণ অ্যারে বাঁধতে চান selectionতবে selection.datum(data)এটি অর্জন করবে।
সতর্কতা: অনেক লোক বিশ্বাস করে যে
selection.datum(data)এটি সমতুল্যselection.data([data])তবে এটি শুধুমাত্র সত্য যদিselectionএকক উপাদান থাকে । যদিselectionএকাধিক ডিওএমউপাদান থাকে তবে নির্বাচনের প্রতিটি উপাদানকেselection.datum(data)সম্পূর্ণরূপে আবদ্ধ করবেdata। বিপরীতে,selection.data([data])শুধুমাত্রdataপ্রথম উপাদানটিরসম্পূর্ণতার সাথে আবদ্ধselection। এটি ডেটা-যুক্ত হওয়ার আচরণের সাথে সামঞ্জস্যপূর্ণselection.data।
কোনও dataইনপুট যুক্তি সরবরাহ করার সময়
selection.data()নির্বাচনের প্রতিটি উপাদানের জন্য সীমাবদ্ধ ডেটাম নেবে এবং তাদেরকে একটি অ্যারেতে সংযুক্ত করে ফিরে আসবে। সুতরাং, আপনার যদি selectionতথ্য দিয়ে 3 DOM উপাদানে রয়েছে "a", "b"এবং "c", প্রতিটি যথাক্রমে আবদ্ধ selection.data()আয় ["a", "b", "c"]। এটি লক্ষ করা গুরুত্বপূর্ণ যে যদি selectionডেটামের সাথে "a"আবদ্ধ (উদাহরণস্বরূপ) কোনও একক উপাদান থাকে তবে কিছুটা প্রত্যাশা না করে selection.data()ফিরে আসবে ।["a"]"a"
selection.datum()এটি কেবলমাত্র একটি একক নির্বাচনের জন্য অর্থবোধ করে কারণ এটি নির্বাচনের প্রথম উপাদানটির সাথে আবদ্ধ ডেটামকে ফিরিয়ে দেওয়া হিসাবে সংজ্ঞায়িত হয় । সুতরাং উদাহরণস্বরূপ এর বাউন্ড উপাত্ত সঙ্গে DOM উপাদানে গঠিত নির্বাচন সঙ্গে উপরে "a", "b"এবং "c", selection.datum()কেবল ফিরে আসবে "a"।
মনে রাখবেন যে এমনকি যদি
selectionএকটি একক উপাদান থাকেselection.datum()এবংselection.data()বিভিন্ন মান ফেরত দেয়। পূর্ববর্তীটি বাছাইয়ের জন্য বাউন্ড ডেটামটি প্রদান করে ("a"উপরের উদাহরণে) যেখানে পরেরটি একটি অ্যারের মধ্যে বাউন্ড ড্যাটামটি দেয় (["a"]উপরের উদাহরণে)।
আশা করা যায় এটি কোনও ইনপুট আর্গুমেন্ট হিসাবে ডেটা সরবরাহ করার সময় এবং কোনও ইনপুট আর্গুমেন্ট সরবরাহ না করে বাউন্ড ড্যাটামের অনুসন্ধানের ক্ষেত্রে কীভাবে একে অপরের থেকে আলাদা selection.dataএবং selection.datum()আলাদা হতে সাহায্য করে ।
দ্রষ্টব্য - কিভাবে এই কাজ করে বুঝতে করার সেরা উপায় Chrome এ একটি ফাঁকা HTML ডকুমেন্ট দিয়ে শুরু করতে এবং কনসোল খুলুন এবং নথি হতে কয়েক উপাদান যোগ করার চেষ্টা এবং তারপর ব্যবহার করে তথ্য বাঁধাই শুরু করার selection.dataএবং selection.datum। কখনও কখনও, পড়া না করে কিছু করার দ্বারা "কুঁচকে" যাওয়া অনেক সহজ।
এখানে কয়েকটি ভাল লিঙ্ক রয়েছে:
ডি 3 "ডেটা ()" তে ভাল আলোচনা: D3.js কীভাবে ডেটা নোডগুলিতে আবদ্ধ করে তা বোঝা
পরবর্তীকালে:
# selection.data([values[, key]])বর্তমান নির্বাচনের সাথে ডেটার নির্দিষ্ট করা অ্যারে যোগদান করে। নির্দিষ্ট মানগুলি হ'ল ডেটা মানগুলির একটি অ্যারে, যেমন সংখ্যা বা বস্তুর অ্যারে বা কোনও ফাংশন যা মানগুলির অ্যারে দেয়।
...
# selection.datum([value])প্রতিটি নির্বাচিত উপাদানের জন্য সীমাবদ্ধ ডেটা প্রাপ্ত বা সেট করে। নির্বাচন.ডাটা পদ্ধতির বিপরীতে, এই পদ্ধতিটি একটি যোগদানের গণনা করে না (এবং এইভাবে নির্বাচনগুলি প্রবেশ এবং প্রস্থান নির্বাচন করে না)।
আমি মনে করি হ্যামস্টারহয়ের দেওয়া ব্যাখ্যাটি এখন পর্যন্ত সেরা। এটির প্রসারিত করতে এবং পার্থক্যের একটি দৃশ্য উপস্থাপনা দেওয়ার জন্য আমি একটি নমুনা নথি তৈরি করেছি যা কমপক্ষে dataএবং এর মধ্যে পার্থক্যের কমপক্ষে অংশটি চিত্রিত করে datum।
নীচের উত্তরটি এই পদ্ধতিগুলি ব্যবহার করে নেওয়া একটি মতামতের আরও বেশি, তবে আমি ভুল হলে আমি সংশোধন করে খুশি।
এই উদাহরণটি নীচে বা এই ফিডলে চালানো যেতে পারে ।
const data = [1,2,3,4,5];
const el = d3.select('#root');
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node => data: ${d}`);
const join= el
.selectAll('div.b')
.data(data);
join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)আমি মনে করি এটি datumউপলব্ধি করা সহজ কারণ যেহেতু এটি যোগদান করে না, তবে অবশ্যই এটির অর্থ এটির ব্যবহারের ক্ষেত্রেও বিভিন্ন ঘটনা রয়েছে।
আমার কাছে একটি বড় পার্থক্য - যদিও আরও অনেক কিছু রয়েছে - এটি dataহ'ল একটি ডি 3 চার্টে কেবলমাত্র (সরাসরি) আপডেট করার প্রাকৃতিক উপায়, পুরো প্রবেশ / আপডেট / প্রস্থান প্যাটার্নটি একেবারে সহজ করে দিলে, এটি একবার আপনি পেয়ে যান।
datumঅন্যদিকে আমার কাছে স্থির উপস্থাপনার জন্য আরও উপযুক্ত বলে মনে হচ্ছে। নীচের উদাহরণে উদাহরণস্বরূপ আমি একই ফলাফলটি অর্জন করতে পারি মূল অ্যারেতে আমার লুপিং এবং সূচক অনুসারে ডেটা অ্যাক্সেস করতে:
data.map((n, i) => {
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node-${n} => data: ${d[i]}`);
});এটি এখানে চেষ্টা করুন: https://jsfiddle.net/gleezer/e4m6j2d8/6/
উনার বোধহয় আবার এই ভাবে উপলব্ধি করা সহজ হিসাবে আপনি প্রবেশ / আপডেট / প্রস্থান প্যাটার্ন থেকে আসছে মানসিক বোঝা থেকে মুক্ত রাখতে, কিন্তু যত তাড়াতাড়ি আপনি আপডেট করতে হবে অথবা নির্বাচন আপনাকে নিশ্চয় অবলম্বন বন্ধ ভাল হবে পরিবর্তন .data()।
const data = [1,2,3,4,5];
const el = d3.select('#root');
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node => data: ${d}`);
const join= el
.selectAll('div.b')
.data(data);
join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)/* Ignore all the css */
html {
font-family: arial;
}
.l {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin: 10px 0;
}
.l-a {
background: #cf58e4;
}
.l-b {
background: #42e4e4;
}
.a {
border-bottom: 2px solid #cf58e4;
}
.b {
border-bottom: 2px solid #42e4e4;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>
<div style="margin-bottom: 20px;">
<span class="l l-a"></span> .datum() <br />
<span class="l l-b"></span> .data()
</div>
<div id="root"></div>