ডি 3 এবং এআরটি দিয়ে নেটিভ প্রতিক্রিয়াতে ডোনাট চার্ট তৈরি করা

আপনি যদি প্রতিটি ব্যবহারকারীর জন্য পৃথকীকরণের ডেটা প্রদর্শন করে এমন একটি রিয়েট নেটিভ অ্যাপ্লিকেশন তৈরি করছেন, আপনি ডায়নামিক ডেটা ভিজ্যুয়ালাইজেশন তৈরি করতে চাইতে পারেন। জাভা স্ক্রিপ্ট ব্যবহার করে গতিশীল ভিজ্যুয়ালাইজেশন তৈরির জন্য ডি 3 হ'ল অন্যতম জনপ্রিয় এবং শক্তিশালী গ্রন্থাগার। এটি এআরটি ব্যবহার করে রিয়েট নেটিভের সাথে সংহত করা যেতে পারে, একটি লাইব্রেরি যা এসভিজি, স্কেলেবল ভেক্টর গ্রাফিক্স প্রসেস করে এবং প্রদর্শন করে।

এই টিউটোরিয়ালে, আমি কীভাবে ডি 3 এবং এআরটি ব্যবহার করে একটি সহজ প্রতিক্রিয়া নেটিভ ডোনাট চার্ট তৈরি করব তা প্রদর্শন করব। চূড়ান্ত পণ্যটি একটি স্বেচ্ছাসেবী পরিমাণ ডেটা গ্রহণ করবে এবং নিম্নলিখিতগুলির মতো একটি ডোনাট চার্ট তৈরি করবে:

সেটআপ

রিএ্যাক্ট নেটিভ এআরটি দিয়ে ডি 3 ব্যবহার করার জন্য আপনাকে প্রথমে আপনার প্রকল্পটি আরটি গ্রন্থাগারের সাথে সংযুক্ত করতে হবে to এআরটি দিয়ে জাহাজগুলি প্রতিক্রিয়া জানায় তবে আকার বিবেচনার কারণে এর সমস্ত নির্ভরতা অন্তর্ভুক্ত করে না।

যদি আপনি ইতিমধ্যে না পেয়ে থাকেন তবে বিশ্বব্যাপী প্রতিক্রিয়া নেটিভ সিএলআই ইনস্টল করুন:

এনপিএম ইনস্টল -জি-দেশীয়-ক্লাইয়ের প্রতিক্রিয়া

তারপরে, এআরটি এবং ডি 3 ইনস্টল করুন এবং এআরটিকে রিএ্যাক্ট নেটিভের সাথে লিঙ্ক করার জন্য কমান্ডটি চালান:

এনপিএম ইনস্টল আর্ট এনপিএম ইনস্টল ডি 3
নেটিভ লিঙ্ক প্রতিক্রিয়া

আপনার প্রকল্পে, ডোনট.জেস নামে একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিতগুলি আমদানি করুন:

আমদানি থেকে 'রিএ্যাক্ট' আমদানি থেকে 'ডি 3' আমদানি থেকে 'রি 3-নেটিভ' কনস্ট} সারফেস, গ্রুপ, শেপ} = আরটি

একটি সারফেস তৈরি করা হচ্ছে

শুরু করার জন্য, আমরা একটি সারফেস সেট আপ করব। এই এআরটি উপাদানটি ডি 3 দ্বারা নির্মিত এসভিজি পাথ ডেটা রেন্ডার করবে।

কোনও ওয়েব ব্রাউজারে ডি 3 রেন্ডার করা থেকে ভিন্ন, রিএ্যাক্ট নেটিভের ডি 3 এর কোনও ডিওমে অ্যাক্সেস নেই এবং তাই ইনজেকশনের মাধ্যমে চাক্ষুষ উপস্থাপনা তৈরি করতে পারে না অন্যান্য উপাদান মধ্যে উপাদান। এআরটি সারফেস উপাদানটি ডি 3 এসভিজি ডেটা রেন্ডার করার জন্য একটি স্থান তৈরি করে এই ফাঁকটি সরিয়ে দেয়।

কনস্টের প্রস্থ = 250 কনস্ট উচ্চতা = 250
 // ডোনট এখানে beোকানো হবে 

ডোনাট চার্ট ডেটা

আমি ডোনাট চার্ট তৈরি করতে নিম্নলিখিত ডেটা ব্যবহার করব; অন্য কোনও ডেটা ব্যবহার করা নির্দ্বিধায় যতক্ষণ না এটি অ্যারেতে থাকে।

কনস্ট ব্যবহারকারীপরিচাগুলি = [{আইটেমনাম: 'মাউন্টেন শিশির', দাম: 3}, {আইটেম নাম: 'জুতো', দাম: 50}, {আইটেম নাম: 'কিট ক্যাট', দাম: 1}, {আইটেম নাম: 'ট্যাক্সি', মূল্য : 24}, {আইটেমের নাম: 'ওয়াচ', দাম: 100}, {আইটেম নাম: 'হেডফোন', দাম: 15}, {আইটেম নাম: 'ওয়াইন', দাম: 16}]

ডি 3 সহ চার্ট এঙ্গেল এবং পাথ তৈরি করুন

ডোনাট চার্টের প্লট করার জন্য আমাদের ডেটাসেটের প্রতিটি উপাদানকে একটি বৃত্তের কোণগুলিতে ম্যাপ করতে হবে। আমরা ডোনাট চার্টের প্রতিটি স্লাইসের জন্য কোণ পেতে d3.pie () পদ্ধতিটি ব্যবহার করব। যেহেতু আমি উপরের ইউজারে ডেটাসেট কিনে প্রতিটি আইটেমের দাম চক্রান্ত করতে চাই, তাই আমি D3 কে মান পদ্ধতির মাধ্যমে দামের সম্পত্তিটি খুঁজতে বলব। মান পদ্ধতির ডি প্যারামিটারটি ব্যবহারকারী ক্রয়ের প্রতিটি উপাদানকে উপস্থাপন করে:

গঠন বিভাগ অংলস = d3.pie ()। মান (d => d.price) (ব্যবহারকারী ক্রয়)

প্রতিটি উপাদানের আউটপুট নীচের মত দেখতে হবে:

[... {ডেটা: {আইটেমনাম: 'মাউন্টেন শিশির', মূল্য: 3}, সূচক: 15, মান: 3, শুরুআঙ্গেল: 6.219718788925247, শেষআঙ্গেল: 6.267318677616002, প্যাডআঙ্গল: 0} ...]

মূল ডেটা এখনও রয়েছে, তবে এটি কোনও ডেটা সম্পত্তিতে নেস্টেড। কোণ সম্পর্কিত তথ্য সহ বেশ কয়েকটি নতুন বৈশিষ্ট্য যুক্ত করা হয়েছে।

এর পরে, আমাদের একটি এসভিজি পাথ তৈরি করতে হবে যা আমরা আমাদের সারফেস উপাদানটিতে যেতে পারি। আমরা এটি d3.arc () ফাংশনের মাধ্যমে করব, যা চার্টের উচ্চতা এবং প্রস্থের ভিত্তিতে একটি এসভিজি পাথ তৈরি করে।

কনস্ট পাথ = ডি 3.অ্যাক () .উটাররেডিয়াস (100) // অবশ্যই চার্টের উচ্চতা / প্রস্থ .padAngle (.05) // বিভাগের মধ্যে শ্বেত স্পেসের পরিমাণ নির্ধারণ করে। (60) // অভ্যন্তরীণ 'ডোনাট' সাদা স্থানের আকার

চার্ট তৈরি করতে ডেটা ম্যাপিং

আমাদের কাছে এখন আমাদের উপাত্তগুলির প্রতিটি উপাদানগুলির জন্য কোণ রয়েছে এবং একটি পাথ ফাংশন যা এই কোণগুলিকে নির্দিষ্ট ব্যাসার্ধের সাথে একটি বৃত্তাকার পথে মানচিত্র করতে পারে। ডোনের চার্টটি পথের ক্রিয়াকলাপের সাথে কোণগুলিতে ম্যাপিংয়ের মাধ্যমে তৈরি করা হবে।

আমরা এটি করার আগে, চার্টের পৃথক বিভাগগুলিকে একসাথে গ্রুপ করার জন্য আমাদের একটি গ্রুপ উপাদান সেটআপ করা উচিত:

 // চার্ট বিভাগ এখানে যেতে 

লক্ষ্য করুন যে গ্রুপ উপাদানটির জন্য x এবং y বৈশিষ্ট্যগুলি আমাদের পূর্ব নির্ধারিত প্রস্থ এবং উচ্চতা দুটি দ্বারা বিভক্ত। আমাদের এই সমন্বয়গুলি নির্দিষ্ট করতে হবে কারণ d3.arc () এর মাধ্যমে তৈরি করা পথগুলি স্থানাঙ্ক (0,0) এ ডিফল্টরূপে কেন্দ্র করে। আমাদের ডোনাট চার্টটি যদি (0, 0) কেন্দ্রিক হয় তবে এর এক চতুর্থাংশই দৃশ্যমান হবে। গ্রুপ উপাদানটির x এবং y স্থানাঙ্ক যথাক্রমে প্রস্থ / 2 এবং উচ্চতা / 2 হতে নির্দিষ্ট করে, আমরা আমাদের সারফেস উপাদানটির কেন্দ্রে ডোনাট চার্টকে কেন্দ্র করে যাচ্ছি।

একটি ডোনাট চার্ট রেন্ডার করার জন্য এখন আমরা কোণ তথ্য দিয়ে মানচিত্র করতে পারি:

{বিভাগআঙ্গেলস.ম্যাপ (বিভাগ => ( ))}

রং

রঙগুলির সাথে পরীক্ষার একটি সহজ উপায় হ'ল একটি রঙ স্কেল তৈরি করা যা ব্যবহারকারীর প্রতিটি উপাদান ম্যাপ করে 0 থেকে 255 এর মধ্যে একটি মানকে ডেটা কিনে:

কনস্টের রঙগুলি = d3.scaleLinear () .ডোমেন ([0, প্রোপস.সুসারপ্রেসেস.লেন্থ])। পরিসীমা ([0, 255])

ডোনাট চার্টের প্রতিটি বিভাগের পূরণগুলি তার সূচিপত্রগুলি রঙের কার্যক্রমে প্রেরণ করে গণনা করা যেতে পারে:

ভরাট = {`আরজিবি ($ {50}, $ {রং (সূচক) / 1.5}, $ {রং (সূচক)})`

পরবর্তী পদক্ষেপ

আপনার প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশনটিতে এখন আপনার কাছে একটি প্রাথমিক ডোনাট চার্ট থাকা উচিত। আপনি যদি ডেটা লেবেল যুক্ত করতে আগ্রহী হন তবে আমি ডি 3 সেন্ট্রয়েড পদ্ধতিটি পরীক্ষা করে দেখার পরামর্শ দেব।

আমি আশা করি যে এই টিউটোরিয়ালটি আপনাকে আপনার রিএ্যাক্ট নেটিভ অ্যাপ্লিকেশনে ডি 3 সংহত করতে সহায়তা করেছে!