D3 और jQuery में क्या अंतर है?

Question

इस उदाहरण का जिक्र करते हुए:

http://vallandingham.me/stepper_steps.html

ऐसा लगता है कि डी 3 और jQuery लाइब्रेरी इस अर्थ में बहुत समान हैं कि वे दोनों ऑब्जेक्ट-चाइनिंग तरीके से डोम हेरफेर करते हैं।

मैं यह जानने के लिए उत्सुक हूं कि जे 3 डी क्या कार्य करता है जो कि jQuery और इसके विपरीत से आसान है। बहुत सारे रेखांकन और विज़ुअलाइज़ेशन लाइब्रेरी हैं जो आधार के रूप में jQuery का उपयोग करते हैं (जैसे,Highcharts, flot, wijmo)।

कृपया विशिष्ट उदाहरण दें कि वे कैसे भिन्न हैं।

Answer 1

• डी 3 डेटा-संचालित है लेकिन jQuery नहीं है: jQuery के साथ आप सीधे तत्वों में हेरफेर करते हैं, लेकिन डी 3 के साथ आप डी 3 के अद्वितीय data(), enter()और exit()विधियों और डी 3 तत्वों के माध्यम से डेटा और कॉलबैक प्रदान करते हैं।

• डी 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();

Comments

अच्छा, एक उदाहरण 1000 से अधिक शब्दों के लायक है

— टीएमजी

Answer 2

d3 का मूर्खतापूर्ण वर्णन है। jQuery और d3 बिल्कुल समान नहीं हैं, आप बस उन्हीं चीजों के लिए इनका उपयोग नहीं करते हैं।

jQuery का उद्देश्य सामान्य डोम हेरफेर करना है। यह एक सामान्य उद्देश्य जावास्क्रिप्ट टूलकिट है जिसे आप करना चाहते हैं।

d3 को मुख्य रूप से डेटा के साथ चमकदार रेखांकन बनाने में आसान बनाने के लिए डिज़ाइन किया गया था। यदि आप डेटा के चित्रमय विज़ुअलाइज़ेशन बनाना चाहते हैं, तो आपको निश्चित रूप से इसका उपयोग करना चाहिए (या ऐसा ही कुछ, या इसके ऊपर निर्मित कुछ)।

यदि आप अपने सभी इंटरेक्टिव फॉर्म की जरूरतों के लिए एक सामान्य उद्देश्य जेएस लाइब्रेरी चाहते हैं, तो jQuery या प्रोटो या म्यूटूल पर विचार करें। यदि आप कुछ छोटा चाहते हैं, तो अंडरस्कोर पर विचार करें। js यदि आप निर्भरता इंजेक्शन और परीक्षण क्षमता के साथ कुछ चाहते हैं, तो AngularJS पर विचार करें।

विकिपीडिया से एक सामान्य तुलना गाइड।

मैं देख सकता हूं कि कोई क्यों सोचता है कि वे समान हैं। वे एक समान चयनकर्ता वाक्यविन्यास - $ ('SELECTOR') का उपयोग करते हैं, और d3 HTML तत्वों पर चयन, छानने और संचालन के लिए एक अत्यंत शक्तिशाली उपकरण है, खासकर इन ऑपरेशनों को एक साथ करते हुए। d3 एक सामान्य उद्देश्य पुस्तकालय होने का दावा करके अपने होम पेज पर आपको यह समझाने की कोशिश करता है, लेकिन तथ्य यह है कि ज्यादातर लोग इसका उपयोग तब करते हैं जब वे ग्राफ़ बनाना चाहते हैं । यह आपके औसत डोम हेरफेर के लिए उपयोग करने के लिए बहुत ही असामान्य है क्योंकि d3 सीखने की अवस्था इतनी खड़ी है। हालाँकि, यह jQuery की तुलना में कहीं अधिक सामान्य उपकरण है, और आम तौर पर लोग सीधे उपयोग करने के बजाय d3 के शीर्ष पर अन्य अधिक विशिष्ट पुस्तकालयों (जैसे nvd3) का निर्माण करते हैं।

@ जॉन्स का जवाब भी बहुत अच्छा है। धाराप्रवाह एपीआई = विधि जंजीर। मैं इस बात से भी सहमत हूं कि प्लगइन्स और एक्सटेंशन आपको पुस्तकालयों के साथ कहां ले जाते हैं।

Comments

@zcaudate, d3 लिंक पर नहीं है क्योंकि यह इतना विशिष्ट है। यह लिंक केवल सामान्य रूपरेखा की तुलना करता है।

— केस

दूसरी चीज जो मैं जोड़ूंगा वह यह है कि डी 3 एक एसवीजी (स्केलेबल वेक्टर ग्राफिक्स) बनाता है। यह बहुत अच्छा है क्योंकि चीजें आसानी से आकार बदल सकती हैं और आसानी से अन्य तत्वों के लिए आनुपातिक रहती हैं। यद्यपि आप JQuery में एक ही चीज़ को पूरा करने में सक्षम हो सकते हैं (जैसा कि ओपी के उदाहरण लिंक में दिखाया गया है) वे एक दूसरे को बदलने के लिए नहीं हैं।

— EnigmaRM

वे समान हैं कि वे दोनों सिज़ल पर चलते हैं और समान चयनकर्ताओं (प्रत्येक ढांचे का विशाल हिस्सा) का उपयोग करते हैं। हालांकि, चयन के बाद वे बहुत अलग डोम हेरफेर ऑब्जेक्ट का निर्माण करते हैं।

— cchamberlain

एक मूर्खतापूर्ण विवरण के लिए +1। मैं बहुत से क्लाइंट-साइड लाइब्रेरी और घटकों पर शोध करता हूं, लेकिन पूरी तरह से खो जाने से पहले मुझे उनकी वेब-साइट पर पहला वाक्य नहीं मिला। मैंने and चीजों ’के फैंसी गूढ़ षट्कोणीय मोज़ेक पर क्लिक किया और यह मुझे कहीं रहस्यमय और असंबंधित लगा। चूंकि मैं समझ नहीं पा रहा हूं कि यहां क्या हो रहा है, मुझे लगता है कि मैं d3 क्लब के अयोग्य हूं। जैसे, मैं कम हो जाऊंगा, और पश्चिम में जाऊंगा, और डी 3-कम रहूंगा।

— जोनाथन नेफेल्ड

Answer 3

मैं हाल ही में दोनों का एक छोटा सा उपयोग कर रहा हूँ। चूंकि d3 Sizzle के चयनकर्ताओं का उपयोग करता है इसलिए आप चयनकर्ताओं को बहुत अधिक मिला सकते हैं।

बस ध्यान रखें d3.select ('# mydiv') jQuery ('# mydiv') के समान नहीं है। यह एक ही DOM एलिमेंट है, लेकिन इसे अलग-अलग कंस्ट्रक्टर्स के साथ इंस्टेंट किया जा रहा है। उदाहरण के लिए, मान लें कि आपके पास निम्नलिखित तत्व हैं:

<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"}

Comments

अहा, सोचा है कि क्यों। Data () d3 में jquery की तरह काम नहीं करता है। डी 3 में, सेट करना होगा.attr('data-hash', '654687867asaj')

— प्रोटोटाइप

यह एक बुरा समझौता है। .data()jQuery में मूल रूप से html विशेषता तक पहुँचने का एक शॉर्टकट है data-<custom-name>। लेकिन डी 3 में इसका html डेटा विशेषताओं के साथ कोई लेना-देना नहीं है, और डी 3 में यह क्या करता है एक नया चयन लौटा रहा है क्योंकि पहले से ही चयनित तत्वों के साथ आर्ग में पारित डेटा में शामिल हो गया है।

— नाज़िकस

यह अब एक बुरी तुलना है, लेकिन 2013 तक यह उतना बुरा नहीं था। तब से, jQuery ने पुराने ब्राउज़रों के लिए बहुत सारे पॉलीफ़िलिंग को गिरा दिया है (डेटा विशेषताएँ उनमें से एक थी) जबकि डी 3 ने एक मोनोलिथेक लाइब्रेरी होना बंद कर दिया है और इसके बजाय छोटे विशिष्ट पुस्तकालयों के संग्रह के लिए एक एंट्रीपॉइंट बन गया है

— ffflabs

Answer 4

डी 3 केवल दृश्य रेखांकन के बारे में नहीं है। डेटा प्रेरित दस्तावेज़। जब आप d3 का उपयोग करते हैं, तो आप डेटा को डोम नोड्स से बांधते हैं। एसवीजी के कारण हम ग्राफ बनाने में सक्षम हैं, लेकिन डी 3 इतना अधिक है। आप डी 3 के उपयोग से बैकबोन, कोणीय और एम्बर जैसे फ्रेमवर्क को बदल सकते हैं।

निश्चित नहीं है कि किसने मतदान किया, लेकिन मैं कुछ और स्पष्टता जोड़ दूं।

कई वेबसाइट सर्वर से डेटा का अनुरोध करती हैं, जो आमतौर पर डेटाबेस से आता है। जब वेबसाइट को यह डेटा मिलता है, तो हमें नई सामग्री का पेज अपडेट करना होगा। कई चौखटे ऐसा करते हैं, और d3 ऐसा भी करता है। इसलिए svg तत्व का उपयोग करने के बजाय, आप html एलिमेंट का उपयोग कर सकते हैं। जब आप redraw को कॉल करते हैं, तो यह पृष्ठ को नई सामग्री के साथ जल्दी अपडेट कर देगा। यह बहुत अच्छा है कि सभी अतिरिक्त ओवरहेड्स जैसे कि jquery, रीढ़ की हड्डी + इसके प्लगइन्स, कोणीय, आदि नहीं हैं। आपको केवल d3 पता होना चाहिए। अब d3 में राउटिंग सिस्टम नहीं है। लेकिन आप हमेशा एक पा सकते हैं।

दूसरी ओर जेकरी, इसका एकमात्र उद्देश्य कम कोड लिखना है। यह जावास्क्रिप्ट का केवल एक छोटा हाथ संस्करण है जिसे कई ब्राउज़रों पर परीक्षण किया गया है। यदि आपके वेबपेज पर बहुत सारे jquery नहीं हैं। यह उपयोग करने के लिए एक महान पुस्तकालय है। यह सरल है और कई ब्राउज़रों के लिए जावास्क्रिप्ट विकास से बाहर एक हल्का दर्द होता है।

यदि आपने फैशन की तरह d3 में jquery को लागू करने की कोशिश की, तो यह काफी धीमा होगा, क्योंकि यह उस कार्य के लिए डिज़ाइन नहीं किया गया था, इसी तरह, d3 सर्वरों के लिए डेटा पोस्ट करने के लिए डिज़ाइन नहीं किया गया है, यह सिर्फ डेटा का उपभोग और रेंडर करने के लिए डिज़ाइन किया गया है ।

Comments

"... डी 3 का उपयोग करने के साथ बैकबोन, कोणीय और एम्बर जैसी रूपरेखाओं को बदलें।" क्या आप विस्तार से समझा सकते हैं?

— बिली मून

अपने अनुभव से, मैंने कई लोगों को चार्ट और ग्राफ़ को रेंडर करने के लिए इन रूपरेखाओं का उपयोग करने के लिए देखा है, जब आप उन्हें डी 3 के साथ बदल सकते हैं। यदि कोई चाहता था, तो वे पृष्ठ पर डेटा को रेंडर कर सकते हैं क्योंकि यह तत्वों को डेटा बांधता है। डी 3 बड़े डेटासेट्स के साथ काम कर सकता है जो कि jQuery से अधिक तेज है।

— जेमिलोइ

यकीन नहीं होता कि किसने मुझे नीचा दिखाया, लेकिन मेरी इच्छा है कि वे एक टिप्पणी छोड़ सकते हैं। डी 3 डेटा संचालित दस्तावेजों के लिए है। चार्ट ही नहीं।

— जेमिलोइ

आप d3 आसान के साथ एक पुन: प्रयोज्य घटक का निर्माण कर सकते हैं। bost.ocks.org/mike/chart

— jemiloii

भोली नहीं, मैंने एक आंतरिक उपकरण के लिए केवल डी 3 और वेबसोकेट का उपयोग किया जहां मैं काम करता हूं। डी 3 वेबस्केट्स से प्राप्त डेटा से डेटा बाइंडिंग से निपटा। मैंने कुछ अलग विचारों को प्रबंधित करने के लिए d3 का भी उपयोग किया। यह खुद का एसपीए था। डी 3 html तत्वों के साथ-साथ svg तत्वों को भी संभाल सकता है। आपको प्रोग्रामर को कम नहीं समझना चाहिए। यही कारण है कि वेब मेरे लिए सुंदर है, कई तरीके हैं जो करने के लिए। जिस तरह से आप सबसे अच्छा आनंद उठाते हैं, वह मज़ेदार रहता है।

— jemiloii

Answer 5

d3 डेटा विज़ुअलाइज़ेशन के लिए बनाया गया है, यह ऐसा डोम ऑब्जेक्ट्स के माध्यम से फ़िल्टर करने और परिवर्तनों को लागू करने से होता है।

jQuery डोम हेरफेर और कई बुनियादी जेएस कार्यों के लिए जीवन को आसान बनाने के लिए बनाया गया है।

यदि आप डेटा को सुंदर, इंटरैक्टिव चित्रों में बदलना चाहते हैं, तो डी 3 कमाल है।

यदि आप अपने वेबपृष्ठ को स्थानांतरित करना, हेरफेर करना या अन्यथा संशोधित करना चाहते हैं, तो jQuery आपका टूल है।

Answer 6

बड़ा अच्छा सवाल!

जबकि दोनों पुस्तकालय समान विशेषताओं में से कई साझा करते हैं, मुझे ऐसा लगता है कि jQuery और D3 के बीच सबसे बड़ा अंतर फोकस है।

jQuery क्रॉस-ब्राउज़र होने और उपयोग में आसान होने पर ध्यान देने के साथ एक सामान्य उद्देश्य पुस्तकालय है।

डी 3 डेटा (हेरफेर और विज़ुअलाइज़ेशन) पर केंद्रित है और केवल आधुनिक ब्राउज़रों का समर्थन करता है। और जब यह jQuery की तरह दिखता है, यह उपयोग करने के लिए बहुत अधिक कठिन है।

Comments

jquery एक लेखन कम का अनुसरण करती है अधिक कार्यप्रणाली, d3 दस्तावेज़ तत्वों को डेटा प्रदान करने पर केंद्रित है। कुछ कारण हैं कि डी 3 कठिन है, एक यह कच्ची जावास्क्रिप्ट का उपयोग करता है, और दो, कुछ कच्ची जावास्क्रिप्ट को बदल दिया जाता है। उदाहरण के लिए: जावास्क्रिप्ट forEach (मान, सूचकांक, सरणी), d3 forEach (सूचकांक, मूल्य, सरणी) में। मुझे यकीन नहीं है कि वे फ़ंक्शन तर्कों को उलट देते हैं, बस मैंने स्रोत में क्या देखा है। मुझे लगता है कि अगर हम व्यर्थ कार्यों को निक्स कर लेते हैं तो हम तेजी से डी 3 बना सकते हैं।

— जेमिलोइ

Answer 7

दोनों DOM (चाहे वह HTML या SVG हो) बनाने और हेरफेर करने के एक ही उद्देश्य को हल कर सकते हैं। डी 3 सतहों की एक एपीआई है जो सामान्य कार्यों को सरल करता है जो आप डेटा के आधार पर एक डोम का निर्माण / हेरफेर करते हैं। यह डेटा () फ़ंक्शन के माध्यम से डेटा बाइंडिंग के लिए मूल समर्थन के माध्यम से ऐसा करता है। JQuery में आपको मैन्युअल रूप से डेटा संसाधित करना होगा और यह परिभाषित करना होगा कि DOM उत्पन्न करने के लिए डेटा को कैसे बाँधें। इस वजह से, आपका कोड अधिक प्रक्रियात्मक और कठिन हो जाता है। डी 3 के साथ, यह कम चरण / कोड और अधिक घोषणात्मक है। डी 3 कुछ उच्च स्तर के कार्य भी प्रदान करता है जो एसवीजी में डेटा विज़ुअलाइज़ेशन उत्पन्न करने में सहायता करते हैं। रेंज (), डोमेन (), और स्केल () जैसे फ़ंक्शंस डेटा लेना और उन्हें ग्राफ़ पर प्लॉट करना आसान बनाते हैं। अक्ष () जैसे फ़ंक्शंस भी सामान्य यूआई तत्वों को आकर्षित करना आसान बनाते हैं जिनकी आप चार्ट / ग्राफ़ में अपेक्षा करते हैं।