D3.js এবং চার্ট.জেএস (কেবল চার্টের জন্য) এর মধ্যে তুলনা [বন্ধ]


89

আমি আমার প্রকল্পগুলিতে বেশ কয়েকবার চার্ট.জেএস ব্যবহার করেছি তবে আমি কখনও d3.js ব্যবহার করি নি অনেক লোক বলে যে d3.js চার্টের জন্য সেরা জাভাস্ক্রিপ্ট কাঠামো তবে এগুলির মধ্যে কেউই কেন ব্যাখ্যা করতে পারছে না, বিশেষত যখন আমি চার্ট.জেএস এর সাথে তুলনা করতে চাই।

আমি এটি খুঁজে পেয়েছি: http://www.fusioncharts.com/javascript-charting-compistance/ তবে আমি যা খুঁজছিলাম তা এটি নয়।

ব্যবহারযোগ্যতা এবং কর্মক্ষমতা (কেবল চার্টের জন্য) পদক্ষেপের ক্ষেত্রে এই ফ্রেমওয়ার্কগুলির তুলনা সম্পর্কে কেউ কি জানেন?


4
কেবল মজাদার জন্য, আমি একই ডেটাসেটের সাথে d3.js ব্যবহার করে চার্ট.জেএস বেসিক চার্টগুলি বিকাশ করছি। আপনি একবার দেখে নিতে পারেন - s.codepen.io/bumbeishvili/debug/RGbvPg
বম্ববিশভিলে

আপডেট 2018
ডি

উত্তর:


217

d3.jsকোনও "চার্টিং" লাইব্রেরি নয়। এটি এসভিজি / এইচটিএমএল তৈরি এবং পরিচালনা করার জন্য একটি গ্রন্থাগার। এটি আপনাকে আপনার ডেটা ভিজ্যুয়ালাইজ এবং ম্যানিপুলেট করতে সহায়তা করার সরঞ্জাম সরবরাহ করে। আপনি এটি প্রচলিত চার্ট (বার, লাইন, পাই ইত্যাদি তৈরি করতে ব্যবহার করতে পারেন) এটি আরও অনেক কিছুতে সক্ষম capable অবশ্যই এই "এতটুকু সক্ষম" এর সাথে স্টিপার লার্নিং বক্ররেখা আসে। সেখানে প্রচলিত চার্টিং উপরে নির্মিত লাইব্রেরি অনেক আছে d3.js- nvd3.js, dimple.js, dc.jsযদি আপনি যে রুট যেতে চাই।

আমি এর সাথে পরিচিত নই Chart.jsতবে ওয়েবসাইটটিতে একটি তাত্ক্ষণিক নজর আমাকে বলছে এটি মিলের চার্টিংয়ের লাইব্রেরি চালানো বেশি। এটা তোলে 6 মৌলিক চার্ট ধরনের সমর্থন করে এবং আপনি কি কখনো কাজ করতে যাচ্ছেন নেই কাপড় মত এই সঙ্গে এটাতবে এপিআই সোজা দেখায় এবং আমি নিশ্চিত এটি ব্যবহার করা সহজ।

উভয়ের মধ্যে সবচেয়ে সুস্পষ্ট পার্থক্যটি হ'ল এটি Chart.jsক্যানভাস ভিত্তিক, যখন d3.jsমূলত এসভিজি সম্পর্কে about (এখন আমি মূলত বলছি কারণ d3.jsএটি সমস্ত ধরণের এইচটিএমএল উপাদানগুলিকে ম্যানিপুলেট করতে পারে যাতে আপনি এটি একটি ক্যানভাসে আঁকতে সহায়তা করতেও ব্যবহার করতে পারেন)) সাধারণভাবে ক্যানভাস অনেক সংখ্যক উপাদানগুলির জন্য এসভিজি সম্পাদন করবে (আমি খুব বড় কথা বলছি - হাজার বিন্দু, লাইন, ইত্যাদি ...)। অন্যদিকে, এসভিজি হেরফের এবং ইন্টারঅ্যাক্ট করা সহজ। প্রতিটি পয়েন্ট, লাইন ইত্যাদি এসভিজির সাহায্যে ডোমের অংশ হয়ে যায় - আপনি এখন পয়েন্টটি সবুজ চান, কেবল এটি পরিবর্তন করুন। ক্যানভাসের সাথে এটি একটি স্থিতিশীল অঙ্কন যা কোনও পরিবর্তন আনার জন্য পুনরায় চিত্রণ করা উচিত - অবশ্যই এটি এত দ্রুত আঁকেন যে আপনি সাধারণত কখনই লক্ষ্য করবেন না। মাইক্রোসফ্ট থেকে কিছু ভাল পড়া এখানে ।


6
@ এমরাহ, লিঙ্কটি পুরানো হতে পারে (আইই 9 এর সময়কালের আশেপাশে) তবে প্রদত্ত তথ্যগুলি এখনও খুব প্রাসঙ্গিক।
চিহ্নিত করুন

36

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

  1. সি 3, যা ডি 3 এর উপর ভিত্তি করে এসভিজি ব্যবহার করে
  2. চার্ট.জেএস যা ক্যানভাস ব্যবহার করছে

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

আমি ৪০০ চার্ট (লাইন, বার, পাই, লাইন / বার কম্বো) একসাথে প্রায় 500 টি ডাটাপয়েন্ট সহ লোড করেছি।

আমার সময় পরিমাপের এইচটিএমএল পৃষ্ঠার প্রকৃত লোডিং বাদ দেওয়া হয়েছে। রেন্ডারিংয়ের শেষ অবধি আমি চার্টিং লাইব্রেরি কোডটি ব্যবহার করা শুরু করার মুহুর্তটি আমি ফর্ম পরিমাপ করেছি। সমস্ত চার্ট অ্যানিমেশন বন্ধ ছিল।

সি 3 আধুনিক অ্যান্ড্রয়েড এবং আইফোন ডিভাইসে প্রায় 1500-1800 এমএস নিয়েছিল। আইফোন অ্যান্ড্রয়েডের চেয়ে প্রায় 100 মাইল ভালো পারফর্ম করেছে।

Chart.js প্রায় 400-800 মিমি নিয়েছে। অ্যান্ড্রয়েড আইফোনের চেয়ে প্রায় 300 মিমি ভালো পারফর্ম করেছে।

আশ্চর্যের কিছু নেই, এসভিজি ধীরে ধীরে। আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে খুব ধীর হতে পারে।

সি 3-তে একটি ডেস্কটপ কম্পিউটারে রেন্ডারিং প্রায় 150-200 মিমি এবং চার্ট.জে প্রায় 80-100 মিমি ছিল। অ্যান্ড্রয়েড এবং আইফোন এমুলেটরে একই পরীক্ষা চালানো ডেস্কটপে একই ফলাফল ছিল। সুতরাং মোবাইল ডিভাইসগুলিতে ধীরগতি অবশ্যই হার্ডওয়ার / প্রক্রিয়াজাতকরণের সীমাবদ্ধতার কারণে।

আশা করি এইটি কাজ করবে


21

আপডেট হয়েছে 2016

থাম্বের সাধারণ নিয়মটি হ'ল:

d3.js - ইন্টারেক্টিভ ভিজুয়ালাইজেশনের জন্য দুর্দান্ত

chart.js - দ্রুত এবং সহজ জন্য দুর্দান্ত

আরও কয়েকটি চার্টিং লাইব্রেরি বাড়ছে, তাই পরীক্ষা চালিয়ে যান এবং ওপেন সোর্সে অবদান রাখতে ভুলবেন না !


0
    চার্ট.জেএস
  • এটি এইচটিএমএল 5 ক্যানভাস ট্যাগ ব্যবহার করে যা পিক্সেল নির্ভর,
  • এটি ঘোষণামূলক, এর অর্থ গ্রাফ উত্পন্ন করার জন্য আপনাকে কেবল প্রয়োজনীয় ইনপুটগুলি ঘোষণা করতে হবে
  • পড়া বাঁক কম হয়
  • উত্পন্ন চার্টের প্রকারগুলি পূর্বনির্ধারিত এবং সীমিত
    d3.js
  • এটি রেজগোলিউশন স্বাধীন এমন এসভিজি ব্যবহার করে, সুতরাং যখন আপনি ডি 3 উত্পন্ন গ্রাফটির আকার পরিবর্তন করবেন তখন আপনি স্বচ্ছতা ছাড়বেন না
  • এটি আবশ্যক, এর অর্থ চার্ট তৈরি করতে আপনাকে কিছু যুক্তি লিখতে হবে
  • খাড়া লার্নিং কার্ভ
  • উত্পন্ন চার্টের ধরণগুলি পূর্বনির্ধারিত নয় এবং আপনি যে কোনও চার্ট তৈরি করতে পারেন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.