কীভাবে D3.js এর সাথে historicalতিহাসিক মূল্য চার্ট তৈরি করা যায়

আর্থিক রেকর্ড কল্পনা করার জন্য একটি ধাপে ধাপে পদ্ধতির

পেক্সেলস থেকে কেভিন কু-এর ছবি

ডেটা যোগাযোগ করা এবং একাধিক ডিভাইস এবং প্ল্যাটফর্মগুলিতে এই ভিজ্যুয়ালাইজেশন প্রদর্শন করা চ্যালেঞ্জিং।

“ডেটা ঠিক তেমন কাঁচা। এটি মূল্যবান, তবে যদি তা পরিমার্জন না করা হয় তবে এটি সত্যই ব্যবহার করা যাবে না। “- মাইকেল পামার

ডি 3 (ডেটা-ড্রাইভ ডকুমেন্টস) এই পুরানো দ্বিধাটি সমাধান করে। ডেভেলপার এবং বিশ্লেষকদের ওয়েবে কাস্টম ভিজ্যুয়ালাইজেশন তৈরির বিকল্প রয়েছে। D3.js এর সাহায্যে আমরা DOM (ডকুমেন্ট অবজেক্ট মডেল) এর সাথে ডেটা বাঁধতে পারি। তারপরে ডেটা সংশোধিত ভিজ্যুয়ালাইজেশন তৈরি করতে ডেটা-চালিত ট্রান্সফর্মেশনগুলি প্রয়োগ করুন।

এই টিউটোরিয়ালে আমরা বুঝতে পারি যে কীভাবে আমরা D3.js গ্রন্থাগারটি আমাদের জন্য কাজ করতে পারি।

শুরু হচ্ছে

আমরা একটি তালিকা তৈরি করতে যাচ্ছি যা সময়ের সাথে সাথে আর্থিক উপায়ে চলাফেরা করে shows এই ভিজ্যুয়ালাইজেশন ইয়াহু ফিনান্স সরবরাহ করে মূল্য চার্ট অনুরূপ। আমরা একটি নির্দিষ্ট স্টক ট্র্যাক করে এমন একটি ইন্টারেক্টিভ প্রাইস চার্ট তৈরি করতে প্রয়োজনীয় বিভিন্ন উপাদানগুলি ভেঙে যাচ্ছি।

প্রয়োজনীয় উপাদান:

  1. ডেটা লোড এবং পার্সিং
  2. এসভিজি উপাদান
  3. এক্স এবং ওয়াই অক্ষ
  4. মূল্য লাইন গ্রাফ বন্ধ করুন
  5. কিছু গণনা সহ সাধারণ সরানো গড় বক্ররেখা chart
  6. ভলিউম সিরিজের জন্য বার গ্রাফ
  7. মাউসওভার ক্রসইয়ার এবং কিংবদন্তি

ডেটা লোড এবং পার্সিং

কনট লোডডাটা = ডি 3.জসন ('নমুনা-ডেটা.জসন')। তারপরে (ডেটা => {চার্টের রেজাল্টসডাটা = ডেটা ['চার্ট'] ['ফলাফল'] [0]; কনট কোটডেটা = চার্ট রেজাল্টসডেটা ['সূচক'] ['উদ্ধৃতি'] [0];
চার্ট রিসাল্টসডাটা ['টাইমস্ট্যাম্প'] ফিরিয়ে দিন। মানচিত্র ((সময়, সূচক) => ({তারিখ: নতুন তারিখ (সময় * 1000), উচ্চ: কোটডেটা ['উচ্চ'] [সূচক], নিম্ন: কোটডেটা ['নিম্ন'] [সূচী], উন্মুক্ত: কোটডেটা [' ওপেন '] [সূচীকরণ], নিকট: কোটডেটা [' বন্ধ '] [সূচক], আয়তন: কোটডেটা [' ভলিউম '] [সূচক]})); });

প্রথমে আমরা আমাদের নমুনা ডেটা লোড করতে আনতে মডিউলটি ব্যবহার করব। ডি 3-ফেচ টিএসভি এবং সিএসভি ফাইলগুলির মতো অন্যান্য ফর্ম্যাটগুলিকেও সমর্থন করে। এরপরে অবজেক্টের অ্যারে ফেরাতে ডেটা আরও প্রক্রিয়া করা হয়। প্রতিটি অবজেক্টে ট্রেডিং টাইমস্ট্যাম্প, উচ্চ মূল্য, কম দাম, খোলার দাম, সমাপনী মূল্য এবং ট্রেডিং ভলিউম থাকে।

বডি {পটভূমি: # 00151c; }
# চিত্র {পটভূমি: # 0e3040; রঙ: # 67809f; }

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

এসভিজি উপাদান সংযুক্ত করা হচ্ছে

কনস্ট ইনিশিয়ালচার্ট = ডেটা =>
কনস্ট মার্জিন = {শীর্ষ: 50, ডান: 50, নীচে: 50, বাম: 50}; const প্রস্থ = window.innerWidth - মার্জন.left - মার্জিন.সাইট; স্থির উচ্চতা = উইন্ডো.ইনার উচ্চতা - মার্জিন.টপ - মার্জিন.বটম;
// এসভিজি যোগ করুন পৃষ্ঠায় কনজেন্ট এসভিজি = ডি 3 se নির্বাচন করুন ('# চার্ট')। অ্যাপ্লিকেশন ('এসভিজি') .আরটি ('প্রস্থ', প্রস্থ + মার্জিন ['বাম'] + মার্জিন ['ডান'])। ('উচ্চতা', উচ্চতা + মার্জিন ['শীর্ষ'] + মার্জিন ['নীচে']) all কল (প্রতিক্রিয়াশীল) appপেনড ('g') at ]}, $ {মার্জিন ['শীর্ষ']}) `);

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

মার্জিন ধ্রুবক থেকে মানগুলির সাথে অনুবাদ করার আগে উপরের এসভিজি গ্রুপ উপাদানটিকে এসভিজি গ্রুপ উপাদান যুক্ত করার কথা মনে রাখবেন।

এক্স এবং ওয়াই অক্ষটি রেন্ডার করুন

অক্ষ উপাদানটি রেন্ডার করার আগে, আমাদের আমাদের ডোমেন এবং অঞ্চলটি নির্ধারণ করতে হবে যা পরে অক্ষগুলির জন্য আমাদের স্কেলগুলি তৈরি করতে ব্যবহৃত হবে

// ডেটা অঞ্চল সন্ধান করুন কনস্ট xMin = d3.min (ডেটা, ডি => {রিটার্ন ডি ['তারিখ'];;);
কনস্ট এক্সম্যাক্স = ডি 3.ম্যাক্স (ডেটা, ডি => {রিটার্ন ডি ['তারিখ'];});
কনস্ট yMin = d3.min (ডেটা, ডি => {রিটার্ন ডি ['বন্ধ'];});
কনস্ট yMax = d3.max (ডেটা, ডি => {রিটার্ন ডি ['বন্ধ'];});
// ডায়াগ্রামের জন্য স্কেলড কন্স xস্কেল = ডি 3। স্কেলটাইম () .ডোমেন ([এক্সমিন, এক্সম্যাক্স]) রেঞ্জ ([0, প্রস্থ]);
কনস্ট yScale = d3। স্কেললাইনার () .ডোমেন ([yMin - 5, yMax]) পরিসীমা ([উচ্চতা, 0]);

সমাপনী মূল্য লাইন চার্টের জন্য x এবং y অক্ষগুলি ট্রেডিংয়ের দিন এবং সমাপনী মূল্য নিয়ে গঠিত। সুতরাং আমাদের d3.max () এবং d3.min () দিয়ে ন্যূনতম এবং সর্বাধিক x এবং y মান নির্ধারণ করতে হবে। ডি 3 এর স্কেলটাইম () এবং স্কেললাইনার () এর সাহায্যে আমরা এক্স-অক্ষের উপর টাইম স্কেল এবং y- অক্ষের লিনিয়ার স্কেল তৈরি করতে পারি। স্কেলগুলির পরিসরটি আমাদের এসভিজি উপাদানটির প্রস্থ এবং উচ্চতা দ্বারা সংজ্ঞায়িত করা হয়।

// অক্ষ উপাদান তৈরি করুন Svg .append ('g') .attr ('আইডি', 'xAxis') .attr ('রূপান্তর', `অনুবাদ (0, {উচ্চতা})`)। কল (d3.axis বটম (এক্সস্কেল));
Svg .append ('g') .attr ('id', 'yAxis') .attr ('রূপান্তর', `অনুবাদ ($ {প্রস্থ}, 0)`) .কেল (d3.axisRight (yScale));

এই পদক্ষেপের পরে আমাদের এসভিজি উপাদানটিতে প্রথম g উপাদান যুক্ত করতে হবে, যা d3.axisBottom () পদ্ধতি কল করে এবং এক্স-অক্ষ তৈরি করতে প্যারামিটার হিসাবে xScale ব্যবহার করে। এরপরে এক্স-অক্ষটি ডায়াগ্রাম অঞ্চলে নীচে সরানো হয়। একইভাবে, y- অক্ষটি চার্ট অঞ্চলের ডানদিকে y- অক্ষটি সরানোর আগে y এলকোহল যোগ করে এবং d3.axisRight () কে yScale দিয়ে প্যারামিটার হিসাবে কল করার মাধ্যমে উত্পন্ন হয়।

সমাপনী মূল্য লাইন গ্রাফ রেন্ডার করুন

কনস্ট লাইন = d3 বলা হলে // ঘনিষ্ঠ মূল্য রেখার চিত্রটি তৈরি করে। লিনি ()। x (d => {রিটার্ন এক্সস্কেল (ডি ['তারিখ']);}) ['বন্ধ']);});
// পাথ সংযোজন করুন এবং ডেভেল এসভিজি। অ্যাপেন্ড ('পাথ') .ডাটা ([ডেটা]) অন্তর্ভুক্ত করুন st স্ট্রোক ',' স্টিলব্লিউ ') .আউটআর (' স্ট্রোক প্রস্থ ',' 1,5 ') .আত্র (' ডি ', লাইন);

এখন আমরা আমাদের প্রধান এসভিজি উপাদানটিতে পাথ উপাদান যুক্ত করতে পারি এবং তারপরে আমাদের পার্সড ডেটাসেট ডেটা পাস করতে পারি। আমরা আমাদের সহায়ক ফাংশন লাইনের সাথে ডি বৈশিষ্ট্যটি সেট করি। যা d3.line () পদ্ধতি কল করে। সারিটির x এবং y বৈশিষ্ট্যগুলি বেনামে ফাংশন গ্রহণ করে এবং যথাক্রমে তারিখ এবং সমাপ্তির দাম ফেরত দেয়।

এতক্ষণে আপনার চিত্রটি দেখতে এমন হওয়া উচিত:

চেকপয়েন্ট # 1: এক্স এবং ওয়াই অক্ষ সহ কোর্স লাইন চার্টটি বন্ধ করুন।

সাধারণ চলমান গড় বক্ররেখা রেন্ডারিং

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

কনড মুভিংএভারেজ = (ডেটা, নম্বরঅফপ্রাইসপয়েন্টস) => {রিটার্ন ডেটা.ম্যাপ ((সারি, সূচক, মোট) => {শুরু = ম্যাথ.ম্যাক্স (0, সূচক - সংখ্যাঅফপ্রাইসপয়েন্টস); কনস্ট শেষ = সূচক; কনস্ট সাবসেট = মোট। স্লাইস (শুরু, শেষ + 1); কনস্ট যোগ = উপসেট.আরডুস ((a, খ) => a a + b ফেরান ['বন্ধ'];}, 0);
প্রত্যাবর্তনের তারিখ: রেখা ['তারিখ'], গড়: যোগফল / উপসেট le দৈর্ঘ্য}; }); };

আমরা সরল গড়ের গড় গণনা করতে আমাদের সহায়ক ফাংশন মুভিংএভারেজকে সংজ্ঞায়িত করি। এই ফাংশনটি দুটি পরামিতি গ্রহণ করে, যথাঃ ডেটা সেট এবং মূল্য পয়েন্ট বা পিরিয়ডের সংখ্যা। এরপরে এটি প্রতিটি বস্তুর তারিখ এবং প্রতিটি ডাটা পয়েন্টের জন্য গড় সম্বলিত বস্তুর একটি অ্যারে প্রদান করে।

// 50 দিন ধরে চলন্তএভারেজডেটা = মুভিংএভারেজ (ডেটা, 49) -এর উপর সরল গড়ের গণনা করে;
// কনস্ট মুভিংএভারেজলাইন = ডি 3 নামে পরিচিত যখন একটি চলমান গড় বক্ররেখা তৈরি করে। .লিনি ()। X (d => {রিটার্ন এক্সস্কেল (ডি ['তারিখ']);}) y ']);}) .কুর্তি (d3.curveBasis);
এসভিজি .এপেন্ড ('পাথ') .ডাটা ([চলন্তআরেজডেটা])। স্টাইল ('ভরাট', 'কিছুই নয়') .এইটিআর ('আইডি', 'মুভিংএভারেজাইন') .আত্র ('স্ট্রোক', '# এফএফ 899')। অ্যাটর ('ডি', মুভিংএভারেজলাইন);

আমাদের বর্তমান প্রসঙ্গে, মুভিংএভারেজ () 50 দিন ধরে সাধারণ চলন গড় গণনা করে। সমাপ্ত দামের উপস্থাপনের অনুরূপ, আমরা আমাদের মূল এসভিজি উপাদানটিতে পাথ উপাদান যুক্ত করি। তারপরে আমরা চলমান গড়ের জন্য আমাদের ডেটা সেটটি স্থানান্তর করি এবং আমাদের সহায়ক ফাংশন মুভিংএভারেজলাইন দিয়ে ডি বৈশিষ্ট্যটি সেট করি। পার্থক্যটি হ'ল আমরা d3.curveBasis কে d3.line () এ যুক্ত করি। কার্ভ () একটি বক্র পেতে।

এটি আমাদের চলমান চার্টের উপরে প্রদর্শিত সরল গড় বক্ররেখা নিয়ে যায়:

চেকপয়েন্ট # 2: কমলা বাঁকানো সরল গড়ের প্রতিনিধিত্ব করে। এটি আমাদের মূল্য চলাচলের আরও ভাল ধারণা দেয়।

ভলিউম সিরিজ বার গ্রাফ রেন্ডারিং

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

/ * ভলিউম সিরিজ বারগুলি * / কনস্টেন্ট ভোলডাটা = ডেটা.ফিল্টার (ডি => ডি ['ভলিউম']! == নাল && ডি ['ভলিউম']! == 0);
কনস্ট yMinVolume = d3.min (ভোলডাটা, ডি => {রিটার্ন ম্যাথ.মিন (ডি ['ভলিউম']);});
কনস্ট yMaxVolume = d3.max (ভোলডাটা, ডি => {ম্যাথ.ম্যাক্স (ডি ['ভলিউম']);});
কনস্ট yVolumeScale = d3। স্কেললাইনার () .ডোমেন ([yMinVolume, yMaxVolume]) পরিসীমা ([উচ্চতা, 0]);

ভলিউম সিরিজ বারের চার্টের জন্য x এবং y অক্ষগুলি যথাক্রমে ট্রেডিং দিন এবং ভলিউম নিয়ে গঠিত। সুতরাং আমাদের ন্যূনতম এবং সর্বাধিক y মানগুলি পুনরায় সংজ্ঞায়িত করতে হবে এবং y অক্ষের উপর স্কেললাইনার () ব্যবহার করতে হবে। এই স্কেলের পরিসরটি আমাদের এসভিজি উপাদানটির প্রস্থ এবং উচ্চতা দ্বারা সংজ্ঞায়িত করা হয়। বার গ্রাফের এক্স-অক্ষটি ট্রেডিং দিনের মতো হওয়ায় আমরা এক্সস্কেলটিকে পুনরায় ব্যবহার করব।

এসভিজি। সমস্ত নির্বাচন করুন () .ডাটা (ভোলডেটা)। এন্টার () .পেনড ('রেকট') .আর্টর ('এক্স', ডি => {রিটার্ন এক্সস্কেল (ডি ['তারিখ']);}) .আউটআর ( 'y', d => {yVolumeScale (d ['ভলিউম']);) .attr ('পূরণ', (d, i) => {যদি (i === 0) {ফিরে '# 03a678' ;} অন্য {ভোলডেটা ফিরে আসুন [i-1] .ক্লোজ> d.close? '# c0392b': '# 03a678';}}) .আত্র ('প্রস্থ', 1) .আউটআর ('উচ্চতা', ডি => Height রিটার্ন উচ্চতা - yVolumeScale (d ['ভলিউম']);});

এই বিভাগটি ব্যাখ্যা করে যে কীভাবে নির্বাচন করা সমস্ত () পদ্ধতি প্রবেশ () এবং সংযোজন () পদ্ধতিগুলির সাথে কাজ করে। আপনি যদি এই পদ্ধতিগুলির সাথে পরিচিত না হন তবে আপনি এটি পড়তে পারেন (মাইক বোস্টক নিজে লিখেছেন) read এটি গুরুত্বপূর্ণ হতে পারে কারণ এই পদ্ধতিগুলি ইনপুট-আপডেট-আউটপুট প্যাটার্নের অংশ হিসাবে ব্যবহৃত হয় যা আমি নীচে একটি টিউটোরিয়াল কভার করব।

বারগুলি রেন্ডার করতে, আমরা প্রথমে একটি শূন্য নির্বাচন বা অ্যারে ফিরিয়ে আনার জন্য .selectAll () ব্যবহার করি। পরবর্তী আমরা প্রতিটি বারের উচ্চতা নির্ধারণ করতে ভোলডাটা পাস করি pass এন্টার () পদ্ধতিটি ভলডেটা ডেটাसेटকে তুলনা করে নির্বাচন করা সমস্ত () থেকে নির্বাচনের সাথে তুলনা করে, যা বর্তমানে খালি। ডিওমে বর্তমানে একটি নেই -লিমেন্ট। সংযোজন () পদ্ধতিটি একটি 'রেক্ট' আর্গুমেন্ট গ্রহণ করে, যা ভোলডাটাতে প্রতিটি পৃথক বস্তুর জন্য একটি নতুন ডিওমে তৈরি এলিমেন্ট।

এখানে বারগুলির বৈশিষ্ট্যগুলির একটি ভাঙ্গন রয়েছে। আমরা নিম্নলিখিত বৈশিষ্ট্যগুলি ব্যবহার করব: এক্স, ওয়াই, ফিল, প্রস্থ এবং উচ্চতা।

.attr ('x', d => {xScale (d ['তারিখ']);}) .attr ('y', d => {রিটার্ন yVolumeScale (d ['ভলিউম']);})

প্রথম অ্যাট্রি () পদ্ধতিটি এক্স স্থানাঙ্ককে সংজ্ঞায়িত করে। এটি একটি বেনামী ফাংশন গ্রহণ করে যা তারিখটি ফেরত দেয়। একইভাবে, দ্বিতীয় অ্যাটর () পদ্ধতিটি y- স্থানাঙ্ককে সংজ্ঞায়িত করে। এটি একটি বেনামী ফাংশন গ্রহণ করে যা ভলিউমটি দেয়। এগুলি প্রতিটি বারের অবস্থান নির্ধারণ করে।

.attr ('প্রস্থ', 1) .attr ('উচ্চতা', d => {রিটার্ন উচ্চতা - yVolumeScale (d ['ভলিউম']);});

আমরা প্রতিটি বারে 1 পিক্সেল প্রস্থ নির্ধারণ করি। উপরের থেকে বারটি প্রসারিত করতে (y দ্বারা সংজ্ঞায়িত) এক্স-অক্ষ পর্যন্ত, কেবল y- মান দিয়ে উচ্চতা বিয়োগ করুন।

.attr ('পূরণ', (d, i) => {যদি (i === 0) {ফিরুন '# 03a678'; {অন্য {ভোলডাটা ফিরে আসুন [i-1] .ক্লোজ> d.close? '# c0392b ':' # 03a678 ';}})

বার গুলো যেভাবে রঙ হয়েছে তা কি মনে আছে? আমরা প্রতিটি বারের রঙ নির্ধারণ করতে ফিল অ্যাট্রিবিউটটি ব্যবহার করতে যাচ্ছি। আগের দিনের বন্ধের দামের চেয়ে বেশি বন্ধ হওয়া শেয়ারগুলির জন্য বারটি সবুজ। অন্যথায় বারটি লাল is

আপনার বর্তমান চিত্রটি দেখতে এমন হওয়া উচিত:

চেকপয়েন্ট 3: ভলিউম সিরিজের ডায়াগ্রাম, লাল এবং সবুজ বারগুলির দ্বারা উপস্থাপিত।

আন্তঃব্যক্তির জন্য ক্রশহায়ারদের উপস্থাপনা এবং কিংবদন্তি

আমরা এই টিউটোরিয়ালটির শেষ ধাপে পৌঁছেছি যেখানে আমরা একটি মাউসওভার ক্রসইয়ার তৈরি করব যা ড্রপ লাইনগুলি নির্দেশ করবে। আপনি যদি ডায়াগ্রামের বিভিন্ন পয়েন্টের উপরে মাউসটি সরান, কিংবদন্তি আপডেট করা হয়। এটি আমাদের প্রতিটি ব্যবসায়িক দিনের জন্য সম্পূর্ণ তথ্য (উদ্বোধনী মূল্য, সমাপনী মূল্য, উচ্চ মূল্য, কম দাম এবং ভলিউম) সরবরাহ করে।

নিম্নলিখিত বিভাগটি মাইকা স্টাব্বের দুর্দান্ত উদাহরণকে বোঝায়।

// রেন্ডার করে x এবং y ক্রসহায়ার কনস্ট ফোকাস = এসভিজি। অ্যাপেন্ড ('জি') .এইটিআর ('ক্লাস', 'ফোকাস')। স্টাইল ('ডিসপ্লে', 'কিছুই নয়');
ফোকাস.অ্যাপেন্ড ('বৃত্ত')। attr ('r', 4.5); ফোকাস.অ্যাপেন্ড ('লাইন')। সংঘবদ্ধ ('x', সত্য); ফোকাস.অ্যাপেন্ড ('লাইন')। সংঘবদ্ধ ('y', সত্য);
Svg .append ('rect') .attr ('শ্রেণি', 'ওভারলে') .attr ('প্রস্থ', প্রস্থ) .attr ('উচ্চতা', উচ্চতা) .অন ('মাউসওভার', () => ফোকাস। শৈলী ('প্রদর্শন', নাল)) .অন ('মাউসআউট', () => ফোকাস। স্টাইল ('প্রদর্শন', 'কিছুই নয়')) .ও ('মাউসমোভ', ক্রসহায়ার তৈরি করুন);
d3.select ('। ওভারলে')। শৈলী ('পূরণ', 'কিছুই নয়'); d3.select ('। ওভারলে')। শৈলী ('পয়েন্টার-ইভেন্ট', 'সব');
d3.selectAll ('। ফোকাস লাইন')। শৈলী ('পূরণ', 'কিছুই নয়'); d3.selectAll ('। ফোকাস লাইন')। শৈলী ('স্ট্রোক', '# 67809f'); d3.selectAll ('। ফোকাস লাইন')। শৈলী ('স্ট্রোক-প্রস্থ', '1.5px'); d3.selectAll ('। ফোকাস লাইন')। শৈলী ('স্ট্রোক-দশাররে', '3 3');

ক্রসহায়ারে লাইনগুলি সহ একটি আড়াআড়ি বৃত্ত থাকে। উপরের কোড ব্লকটি পৃথক উপাদানগুলির নকশা সক্ষম করে। আপনি মাউসওভার করার সময়, নিম্নলিখিত ক্রিয়াকলাপের উপর ভিত্তি করে ক্রসশিয়ারটি উত্পন্ন হয়।

const bisectDate = d3.bisector (d => d.date)। বাম;
ফাংশনটি জেনারেটক্রসায়ার () {// ডোমেন কনস্টের সাথে মিলবে তারিখ = xScale.invert (d3.mouse (এটি) [0]) থেকে সংশ্লিষ্ট মানটি প্রদান করে; // সন্নিবেশ পয়েন্টটি কনস i = বাইসেক্টডেট (ডেটা, সম্পর্কিত তারিখ, 1) প্রাপ্ত করে; কনস্ট ডি 0 = ডেটা [আই -1]; কনস্ট ডি 1 = ডেটা [i]; কনট বর্তমান পয়েন্ট = সংশ্লিষ্ট তারিখ - d0 ['তারিখ']> ডি 1 ['তারিখ'] - সংশ্লিষ্ট তারিখ? d1: d0; ফোকাস.এইটিআর ('রূপান্তর', `অনুবাদ ($ {এক্সস্কেল (বর্তমান পয়েন্ট ['তারিখ']]) $, $ {yস্কেল (বর্তমান পয়েন্ট ['বন্ধ']])})`);
ফোকাস। নির্বাচন করুন ('লাইন.এক্স') .আত্র ('x1', 0) .attr ('x2', প্রস্থ - এক্সস্কেল (বর্তমান পয়েন্ট ['তারিখ'])) .ট্রাট ('y1', 0) .attr ( 'y2', 0);
ফোকাস করুন। নির্বাচন করুন ('লাইন.ই') .এটিআর ('x1', 0) .attr ('x2', 0) .attr ('y1', 0) .আউটআর ('y2', উচ্চতা - yScale (বর্তমান পয়েন্ট [ 'বন্ধ']));
আপডেট লেজেন্ডস (বর্তমান পয়েন্ট); }

এরপরে আমরা সন্নিবেশ পয়েন্টটি সনাক্ত করতে d3.bisector () পদ্ধতিটি ব্যবহার করতে পারি যা নিকট-মূল্য লাইন চার্টে পরবর্তী ডাটা পয়েন্টটি হাইলাইট করে। বর্তমান পয়েন্টটি নির্ধারণের পরে, ড্রপলাইনগুলি আপডেট করা হয়। আপডেট লেজেন্ডস () পদ্ধতি বর্তমান পয়েন্টটিকে প্যারামিটার হিসাবে গ্রহণ করে।

কনস্ট্যান্ড আপডেট লেজেন্ডস = কারেন্ট ডেটা => 3 ডি 3.সিলিটএল ('। লাইনলিজেন্ড')। অপসারণ ();
কনস্ট লেজেন্ডকিজ = অবজেক্ট.কিজ (ডেটা [0]); কনট লাইনলিজেন্ড = এসভিজি .সलेक्टটল ('। লাইনলিজেন্ড') .ডাটা (কিংবদন্তি কী) ) => {রিটার্ন `অনুবাদ (0, $ {i * 20})`;}); লাইনলিজেন্ড। অ্যাপেন্ড ('পাঠ্য') .পাঠ (d => {যদি (d === 'তারিখ') {রিটার্ন `$ {d}: $ {বর্তমান ডেটা [d] .toLocaleDateString ()}`;} অন্যথায় যদি ( d === 'উচ্চ' || d === 'নিম্ন' || d === 'খোলা' || d === 'বন্ধ') {রিটার্ন `$ {d}: $ {কারেন্টডাটা [d]। টু ফিক্সড (2)} `;} অন্য {রিটার্ন $ {d}: $ {কারেন্টডাটা [d]}`;}})। স্টাইল ('ফিল', 'সাদা') .আউটআর ('রূপান্তর', 'অনুবাদ ( 15.9) '); };

আপডেট লেজেন্ডস () পদ্ধতিটি ক্লোজিং লাইন গ্রাফের নির্বাচিত মাউসওভার পয়েন্টের তারিখ, শুরুর দাম, সমাপনী মূল্য, উচ্চ, নিম্ন এবং ভলিউম দেখিয়ে কিংবদন্তি আপডেট করে। ভলিউম বার গ্রাফের অনুরূপ, আমরা এন্টার () এবং সংযোজন () পদ্ধতিগুলির সাথে সিলেক্ট অল () পদ্ধতি ব্যবহার করি।

কিংবদন্তিগুলি রেন্ডার করার জন্য, আমরা কিংবদন্তিগুলি নির্বাচন করতে .সलेक्ट নির্বাচন করুন ('। লাইনলিজেন্ড') ব্যবহার করি এবং তারপরে তাদের সরানোর জন্য মুছে ফেলা () পদ্ধতিটি কল করি। এরপরে আমরা কিংবদন্তি কিংবদন্তির কীগুলি পাস করি যা পৃথক বারগুলির উচ্চতা নির্ধারণ করে। এন্টার () পদ্ধতিটি বলা হয়, যা ভোলডেটা ডেটাসেট এবং সিলেক্টএল () থেকে নির্বাচনের তুলনা করে, যা বর্তমানে খালি রয়েছে। ডিওমে বর্তমানে একটি নেই -লিমেন্ট। সংযোজন () পদ্ধতিটি একটি 'rect' আর্গুমেন্ট গ্রহণ করে, যা ভোলডাটাতে প্রতিটি পৃথক বস্তুর জন্য নতুন ডিওমে তৈরি এলিমেন্ট।

এরপরে, কিংবদন্তিগুলিকে তাদের নিজস্ব বৈশিষ্ট্য যুক্ত করুন। দামগুলিকে 2 দশমিক স্থানে রূপান্তর করে আমরা মানগুলি আরও প্রক্রিয়া করি। আমরা পঠনযোগ্যতার জন্য ডিফল্ট লোকালে তারিখের অবজেক্টটিও সেট করছি।

এটিই শেষ ফলাফল হবে:

চেকপয়েন্ট 4: চিত্রের যে কোনও অংশের উপরে মাউস পয়েন্টারটি সরান!

সর্বশেষ ভাবনা

অভিনন্দন! আপনি এই টিউটোরিয়ালের শেষে পৌঁছেছেন। উপরে প্রদর্শিত হিসাবে, D3.js সহজ তবে গতিশীল। আপনি আপনার সমস্ত ডেটাসেটের জন্য কাস্টম ভিজ্যুয়ালাইজেশন তৈরি করতে পারেন। আসন্ন সপ্তাহগুলিতে আমি এই সিরিজের দ্বিতীয় অংশ প্রকাশ করব, যা D3.j এর এন্টার-আপডেট-এক্সিট-প্যাটার্ন সম্পর্কে বিশদ নজর রাখবে which এর মধ্যে, আপনি ডিআই.জেএসএস দিয়ে তৈরি এপিআই ডকুমেন্টেশন, অন্যান্য টিউটোরিয়াল এবং অন্যান্য আকর্ষণীয় ভিজ্যুয়ালাইজেশন পরীক্ষা করতে চাইতে পারেন may

উত্স কোডের পাশাপাশি এই টিউটোরিয়ালটির সম্পূর্ণ প্রদর্শন পরীক্ষা করে দেখুন। আপনাকে অনেক ধন্যবাদ এবং আমি আশা করি আপনি আজ নতুন কিছু শিখলেন!

এই নিবন্ধটি পর্যালোচনা করার জন্য ডেবি লিওংকে বিশেষ ধন্যবাদ।