ডি 3 এবং jQuery এর মধ্যে পার্থক্য কী?

103

এই উদাহরণ উল্লেখ করে:

http://vallandingham.me/stepper_steps.html

দেখে মনে হয় যে ডি 3 এবং জকিউয়ারি লাইব্রেরিগুলি এই অর্থে খুব মিল রয়েছে যে তারা উভয়ই কোনও বস্তু-শৃঙ্খলাবদ্ধভাবে ডিওএম ম্যানিপুলেশন করে।

আমি জানতে আগ্রহী যে ডি -৩ কি jQuery এবং তদ্বিপরীত থেকে আরও সহজ করে তোলে functions প্রচুর গ্রাফিং এবং ভিজ্যুয়ালাইজেশন লাইব্রেরি রয়েছে যা ভিত্তি হিসাবে jQuery ব্যবহার করে (যেমন,highcharts, flot, wijmo)।

তারা কীভাবে আলাদা তার নির্দিষ্ট উদাহরণ দিন।

javascript jquery d3.js

— zcaudate
সূত্র

92

ডি 3 হ'ল ডেটা-চালিত তবে jQuery নয়: jQuery এর মাধ্যমে আপনি সরাসরি উপাদানগুলিকে ম্যানিপুলেট করেন তবে ডি 3 এর সাহায্যে আপনি ডি 3 এর অনন্য , এবং পদ্ধতি এবং ডি 3 উপাদানগুলিকে ম্যানিপুলেট করে ডেটা এবং কলব্যাক সরবরাহ করেন ।data()enter()exit()
ডি 3 সাধারণত ডেটা ভিজুয়ালাইজেশনের জন্য ব্যবহৃত হয় তবে ওয়েব অ্যাপ্লিকেশন তৈরি করতে jQuery ব্যবহৃত হয়। ডি 3 এর অনেকগুলি ডেটা ভিজ্যুয়ালাইজেশন এক্সটেনশন রয়েছে এবং jQuery এর অনেকগুলি ওয়েব অ্যাপ্লিকেশন প্লাগইন রয়েছে।
উভয়ই জাভাস্ক্রিপ্ট ডিওএম ম্যানিপুলেশন লাইব্রেরি, সিএসএস নির্বাচক এবং সাবলীল এপিআই রয়েছে এবং ওয়েব মানের উপর ভিত্তি করে যা তাদের অনুরূপ দেখায়।

নিম্নলিখিত কোডটি ডি 3 ব্যবহারের উদাহরণ যা jQuery দিয়ে সম্ভব নয় ( jsfiddle এ চেষ্টা করুন ):

  // create selection
  var selection = d3.select('body').selectAll('div');

  // create binding between selection and data
  var binding = selection.data([50, 100, 150]);

  // update existing nodes
  binding
    .style('width', function(d) { return d + 'px'; });

  // create nodes for new data
  binding.enter()
    .append('div')
    .style('width', function(d) { return d + 'px'; });

  // remove nodes for discarded data
  binding.exit()
    .remove();

— আলী শাকিবা
সূত্র

9

সুন্দর, একটি উদাহরণ 1000 শব্দের চেয়ে বেশি

— টিএমজি

59

d3 একটি নির্বোধ বর্ণনা আছে। jQuery এবং d3 মোটেও একই রকম নয়, আপনি কেবল একই জিনিসগুলির জন্য এগুলি ব্যবহার করবেন না।

jQuery এর উদ্দেশ্য হল সাধারণ ডোম ম্যানিপুলেশন করা। এটি আপনি যে কোনও কাজ করতে চাইতে পারেন এটির একটি সাধারণ উদ্দেশ্য জাভাস্ক্রিপ্ট টুলকিট।

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

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

উইকিপিডিয়া থেকে একটি সাধারণ তুলনা গাইড।

কেউ দেখতে পাবে কেন তারা একই রকম হয় think তারা অনুরূপ সিলেক্টর সিনট্যাক্স ব্যবহার করে - LECT ('নির্বাচনকারী'), এবং ডি 3 এইচটিএমএল উপাদানগুলি নির্বাচন, ফিল্টারিং এবং পরিচালনা করার জন্য অত্যন্ত শক্তিশালী একটি সরঞ্জাম, বিশেষত এই ক্রিয়াকলাপগুলি একসাথে শৃঙ্খলাবদ্ধ করার সময়। ডি 3 এটি একটি সাধারণ উদ্দেশ্যে গ্রন্থাগার হিসাবে দাবি করে এটির হোম পেজে আপনাকে ব্যাখ্যা করার চেষ্টা করে, তবে আসল বিষয়টি হ'ল বেশিরভাগ লোক যখন গ্রাফ তৈরি করতে চায় তখন এটি ব্যবহার করে । আপনার গড় ডোম ম্যানিপুলেশনের জন্য এটি ব্যবহার করা বেশ অস্বাভাবিক কারণ ডি 3 লার্নিং বক্ররেখা এত খাড়া। এটি jQuery এর চেয়ে অনেক বেশি সাধারণ সরঞ্জাম এবং সাধারণত লোকেরা সরাসরি ব্যবহার না করে D3 এর শীর্ষে আরও নির্দিষ্ট নির্দিষ্ট গ্রন্থাগার (যেমন এনভিডি 3) তৈরি করে।

@ জনসের উত্তরও খুব ভাল। সাবলীল এপিআই = পদ্ধতি শৃঙ্খলা। প্লাগইনগুলি এবং এক্সটেনশান আপনাকে লাইব্রেরি দিয়ে কোথায় নিয়ে যায় সে সম্পর্কেও আমি একমত।

— কেস
সূত্র

1

@ zcaudate, d3 লিঙ্কে নেই কারণ এটি এতটা বিশেষজ্ঞ। এই লিঙ্কটি কেবল সাধারণ ফ্রেমওয়ার্কগুলির সাথে তুলনা করে।

— কেস

1

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

— এনগিমআরএম

2

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

— চেম্বারলাইন

5

নির্বোধ বর্ণনার জন্য +1 আমি প্রচুর ক্লায়েন্ট-সাইড লাইব্রেরি এবং উপাদানগুলি নিয়ে গবেষণা করি তবে সম্পূর্ণ হারিয়ে যাওয়ার অনুভূতির আগে আমি তাদের ওয়েবসাইটে প্রথম বাক্যটি পেলাম না। আমি 'জিনিসগুলির' অভিনব রহস্যময় ষড়ভুজ মোজাইকটিতে ক্লিক করেছি এবং এটি আমাকে রহস্যময় এবং সম্পর্কিত নয় took যেহেতু আমি এখানে কী চলছে তা বুঝতে ব্যর্থ হলাম আমি ধরে নিই যে আমি ডি 3 ক্লাবের অযোগ্য worthy এই হিসাবে, আমি হ্রাস করব, এবং পশ্চিমে যাব, এবং ডি-কম থাকব।

— জোনাথন নিউফিল্ড

13

আমি ইদানীং দুটোই ব্যবহার করেছি। যেহেতু ডি 3 সিজলের সিলেক্টর ব্যবহার করে আপনি নির্বাচকদের বেশ মিশ্রণ করতে পারেন।

শুধু মনে রাখবেন d3.select ('# mydiv') jQuery ('# মাইডিভ') এর মতো পুরোপুরি ফিরে আসে না। এটি একই ডোম উপাদান, তবে এটি বিভিন্ন নির্মাণকারীর সাথে তাত্ক্ষণিকভাবে চলছে। উদাহরণস্বরূপ, আসুন আপনাকে নীচের উপাদানটি বলে নিন:

<div id="mydiv" rel="awesome div" data-hash="654687867asaj"/>

এবং আসুন কিছু সাধারণ পদ্ধতি গ্রহণ করি:

> d3.select('#mydiv').attr('rel') ;
 "awesome div"

> jQuery('#mydiv').attr('rel');
 "awesome div"

বৈধ মনে হয়। তবে আপনি যদি আরও কিছুটা এগিয়ে যান:

> d3.select('#mydiv').data();
 [undefined]

> jQuery('#mydiv').data();
 Object {hash: "654687867asaj"}

— ffflabs
সূত্র

আহা, ভেবে দেখেছেন। D3 () d3 কেন jquery এর মতো কাজ করে না। ডি 3-তে, সেট করতে হবে.attr('data-hash', '654687867asaj')

— প্রোটোটাইপ করুন

6

এটি একটি খারাপ তুলনা। .data()jQuery এ মূলত এইচটিএমএল বৈশিষ্ট্য অ্যাক্সেসের জন্য একটি শর্টকাট data-<custom-name>। তবে ডি 3-তে এটি এইচটিএমএল ডেটা অ্যাট্রিবিউটগুলির সাথে কিছুই করার নেই এবং এটি ডি 3 এ যা করে তা ইতিমধ্যে নির্বাচিত উপাদানগুলির সাথে আরগসে ডেটা সংযুক্ত হিসাবে নতুন নির্বাচনকে ফিরিয়ে দিচ্ছে।

— নাজিকাস

3

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

— ffflabs

11

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

কারা ভোট দিয়েছিল তা নিশ্চিত নয়, তবে আমাকে আরও কিছু স্পষ্টতা যোগ করতে দিন।

অনেক ওয়েবসাইট সার্ভার থেকে ডেটা অনুরোধ করে যা সাধারণত একটি ডাটাবেস থেকে আসে। ওয়েবসাইটটি যখন এই ডেটা গ্রহণ করে, আমাদের নতুন সামগ্রীর একটি পৃষ্ঠা আপডেট করতে হবে। অনেকগুলি ফ্রেমওয়ার্ক এটি করে এবং ডি 3 এটিও করে। সুতরাং কোনও এসভিজি উপাদান ব্যবহার না করে পরিবর্তে আপনি এইচটিএমএল উপাদান ব্যবহার করতে পারেন। আপনি যখন পুনরায় আঁকুন কল করবেন, এটি দ্রুত নতুন সামগ্রী সহ পৃষ্ঠাটি আপডেট করবে। জ্যাকুয়ারি, ব্যাকবোন + এটির প্লাগইনস, কৌনিক ইত্যাদির মতো সমস্ত অতিরিক্ত ওভারহেড না রাখা সত্যিই চমৎকার You আপনার কেবলমাত্র ডি 3 জানতে হবে। এখন ডি 3 এর মধ্যে কোনও রাউটিং সিস্টেম বেকড নেই। তবে আপনি সর্বদা একটি খুঁজে পেতে পারেন।

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

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

— jemiloii
সূত্র

1

"... ব্যাকবোন, কৌণিক এবং এম্বারের মতো ফ্রেমওয়ার্কগুলি ডি 3 ব্যবহার করে প্রতিস্থাপন করুন।" তুমি কি বিস্তারিত বলতে পারো?

— বিলি মুন

আমার অভিজ্ঞতা থেকে, আমি দেখেছি অনেকগুলি এই ফ্রেমওয়ার্কগুলি চার্ট এবং গ্রাফগুলি রেন্ডার করতে ব্যবহার করে, যখন আপনি ডি 3 দিয়ে তাদের প্রতিস্থাপন করতে পারেন। যদি কেউ চায়, তারা পৃষ্ঠায় ডি 3 রেন্ডার ডেটা রাখতে পারে যেহেতু এটি উপাদানগুলিতে ডেটা বাঁধে। D3 jQuery এর চেয়ে দ্রুত বড় ডেটাসেটের সাথে কাজ করতে পারে।

— জিমিলোই

কে আমাকে কমেছে তা নিশ্চিত নয়, তবে আমি আশা করি তারা কোনও মন্তব্য করতে পারত। ডি 3 ডেটা চালিত নথির জন্য। শুধু চার্ট নয়

— জিমিলোই

আপনি d3 সহজ দিয়ে একটি পুনরায় ব্যবহারযোগ্য উপাদান তৈরি করতে পারেন। bost.ocks.org/mike/chart

— jililii

2

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

— জিমিলোই

10

d3 ডেটা ভিজ্যুয়ালাইজেশনের জন্য তৈরি করা হয়, এটি ডিওএম অবজেক্টগুলির মাধ্যমে ফিল্টার করে এবং ট্রান্সফরমেশন প্রয়োগ করে এটি করে।

jQuery DOM হেরফের জন্য এবং অনেক বেসিক জেএস কাজের জন্য জীবন সহজ করে তোলে।

আপনি যদি ডেটাটিকে সুন্দর, ইন্টারেক্টিভ ছবিগুলিতে রূপান্তর করতে দেখছেন তবে ডি 3 দুর্দান্ত।

আপনি যদি সরিয়ে নিতে চান, নিজের ওয়েবপৃষ্ঠাটি চালাবেন বা অন্যথায় সংশোধন করতে চান, jQuery হ'ল আপনার সরঞ্জাম।

— eighteyes
সূত্র

7

দুর্দান্ত প্রশ্ন!

উভয় লাইব্রেরি একই বৈশিষ্ট্যগুলির অনেকগুলি ভাগ করে নিলেও, আমার কাছে মনে হয় jQuery এবং D3 এর মধ্যে সবচেয়ে বড় পার্থক্যটি ফোকাস।

jQuery হ'ল একটি সাধারণ উদ্দেশ্য গ্রন্থাগার যা ক্রস-ব্রাউজার এবং সহজেই ব্যবহারযোগ্য হতে পারে সেদিকে দৃষ্টি নিবদ্ধ করে।

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

— জন স্লেজার্স
সূত্র

3

jquery একটি আরও কম পদ্ধতি লিখতে লিখতে অনুসরণ করে, d3 নথির উপাদানগুলিতে ডেটা রেন্ডারিংয়ে ফোকাস করে। ডি 3 আরও শক্ত হওয়ার কয়েকটি কারণ রয়েছে, একটিতে এটি কাঁচা জাভাস্ক্রিপ্ট ব্যবহার করে এবং দুটি, কিছু কাঁচা জাভাস্ক্রিপ্ট পরিবর্তিত হয়। উদাহরণস্বরূপ: জাভাস্ক্রিপ্ট ফর প্রতিটি (মান, সূচক, অ্যারে), d3 forEach (সূচক, মান, অ্যারে) এ। আমি উত্সতে যা দেখলাম ঠিক সেগুলি কেন তারা ফাংশন আর্গুমেন্টগুলি বিপরীত করে তা নিশ্চিত নই। আমি মনে করি আমরা যদি অর্থহীন ক্রিয়াকলাপগুলিকে nix'ed করি আমরা দ্রুত d3 তৈরি করতে পারি।

— জিমিলোই

0

উভয়ই ডিওএম তৈরি এবং পরিচালনা করার একই উদ্দেশ্য সমাধান করতে পারে (এটি HTML বা এসভিজি হোক)। D3 এমন একটি API পৃষ্ঠভূমি করে যা ডেটা ভিত্তিক কোনও ডিওএম তৈরি / পরিচালনা করার সময় আপনার গ্রহণ করা সাধারণ কাজগুলি সহজ করে তোলে। এটি ডেটা () ফাংশনের মাধ্যমে ডেটা বাঁধাইয়ের জন্য স্থানীয় সমর্থনটির মাধ্যমে এটি করে। JQuery এ আপনাকে ম্যানুয়ালি ডেটা প্রক্রিয়া করতে হবে এবং একটি ডিওএম উত্পন্ন করার জন্য কীভাবে ডেটার সাথে সংযুক্ত করতে হবে তা নির্ধারণ করতে হবে। এ কারণে, আপনার কোড যুক্তিযুক্ত ও অনুসরণ করা আরও প্রক্রিয়াগত এবং আরও শক্ত হয়ে ওঠে। ডি 3 এর সাথে এটি কম পদক্ষেপ / কোড এবং আরও ঘোষণামূলক। ডি 3 কিছু উচ্চ স্তরের ফাংশনও সরবরাহ করে যা এসভিজিতে ডেটা ভিজ্যুয়ালাইজেশন তৈরিতে সহায়তা করে। পরিসর (), ডোমেন (), এবং স্কেল () এর মতো ক্রিয়াকলাপগুলি ডেটা নেওয়া এবং গ্রাফে প্লট করা সহজ করে তোলে। অক্ষ () এর মতো ক্রিয়াকলাপগুলি সাধারণ ইউআই উপাদানগুলি আঁকাকে আরও সহজ করে তোলে যা আপনি কোনও চার্ট / গ্রাফে আশা করবেন।

— স্টিভেন পেনা
সূত্র