ভিজ্যুয়ালাইজেশন কোড লেখা
লুকার স্টুডিও হেল্পার লাইব্রেরি আপনার এবং লুকার স্টুডিওর মধ্যে একটি ইন্টারফেস প্রদান করে। লাইব্রেরি ব্যবহার করার জন্য, একটি কলব্যাক ফাংশন প্রদান করুন যা ভিজ্যুয়ালাইজেশন রেন্ডার করে।
লাইব্রেরির সবচেয়ে গুরুত্বপূর্ণ ফাংশন হল subscribeToData , যা দুটি আর্গুমেন্ট ব্যবহার করে: একটি callback ফাংশন যা ভিজ্যুয়ালাইজেশন রেন্ডার করে এবং একটি options অবজেক্ট যা আপনার ডেটা কোন ধরণের রূপান্তর করতে চান তা নির্দিষ্ট করে। আরও জানতে, লাইব্রেরি রেফারেন্সটি পর্যালোচনা করুন।
আপনার ভিজ্যুয়ালাইজেশন জাভাস্ক্রিপ্ট কেমন হতে পারে তার একটি রূপরেখা নিচে দেওয়া হল।
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
কমিউনিটি ভিজ্যুয়ালাইজেশন লেখার সময় কয়েকটি গুরুত্বপূর্ণ বিষয় মনে রাখতে হবে।
subscribeToData ফাংশন থেকে আপডেটগুলি তখন ঘটে যখন ডেটা, স্টাইলিং বা আইফ্রেমের আকার পরিবর্তন হয়।
উদাহরণস্বরূপ:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
লুকার স্টুডিও HTML ফাইল নয়, জাভাস্ক্রিপ্ট ফাইল লোড করে এবং চালায়। সমস্ত DOM ম্যানিপুলেশন জাভাস্ক্রিপ্টের মাধ্যমে করতে হবে।
উদাহরণস্বরূপ: নিম্নলিখিত কোডটি DOM-এ একটি div সংজ্ঞায়িত করে এবং যুক্ত করে।
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
কোড বান্ডিল করা হচ্ছে
লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে কেবল একটি জাভাস্ক্রিপ্ট ফাইল লোড করার অনুমতি দেয়। আপলোড করা কোডটি একটি একক ফাইল হওয়া উচিত যাতে dscc হেল্পার লাইব্রেরি , যেকোনো জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরি এবং আপনার ভিজ্যুয়ালাইজেশন কোড অন্তর্ভুক্ত থাকে।
ব্যাশে এটি করার জন্য, আপনি নীচের মত cat কমান্ডটি ব্যবহার করতে পারেন।
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
ম্যানিফেস্ট সংজ্ঞায়িত করা
ভিজ্যুয়ালাইজেশন ম্যানিফেস্ট ফাইলটি ভিজ্যুয়ালাইজেশন সম্পর্কে মেটাডেটা প্রদান করে, সেইসাথে ভিজ্যুয়ালাইজেশন রিসোর্সের অবস্থান সম্পর্কে তথ্য প্রদান করে। ম্যানিফেস্ট ফাইলের অবস্থানকে "কম্পোনেন্ট আইডি" বলা হয়, এবং এটি একটি কমিউনিটি ভিজ্যুয়ালাইজেশন লোড করতে ব্যবহৃত হয়।
একটি নমুনা ম্যানিফেস্ট দেখতে ম্যানিফেস্ট রেফারেন্সটি পর্যালোচনা করুন।
ম্যানিফেস্টের devMode প্যারামিটার ভিজ্যুয়ালাইজেশনের ক্যাশিং আচরণ নির্ধারণ করে। ভিজ্যুয়ালাইজেশন তৈরি করার সময়, devMode true হওয়া উচিত যাতে হার্ড রিফ্রেশগুলি রিসোর্সের সর্বশেষ সংস্করণ লোড করে। কোড স্থিতিশীল হয়ে গেলে, কমিউনিটি ভিজ্যুয়ালাইজেশন সহ রিপোর্টগুলি দ্রুত লোড হয় তা নিশ্চিত করার জন্য devMode false হওয়া উচিত। ক্যাশিং সম্পর্কে আরও জানতে, ক্যাশিং অ্যাডভান্সড গাইড দেখুন।
পরবর্তী পদক্ষেপ
এখন যেহেতু তোমার ভিজ্যুয়ালাইজেশনের কোড লেখা আছে, তোমার ভিজ্যুয়ালাইজেশন কীভাবে হোস্ট করতে হয় তা শিখো।