डी 3 का परिचय

डेटा की प्रोसेसिंग और विज़ुअलाइज़ेशन के लिए D3.js (या सिर्फ डी 3) एक जावास्क्रिप्ट लाइब्रेरी है। यह डेटा एरे को संसाधित और लोड करने और DOM तत्वों को बनाने के लिए सुविधाजनक उपयोगिताओं प्रदान करता है। यह नोट पुस्तकालय के मूल तरीकों के साथ काम करने का वर्णन करता है, यह पुस्तकालय की मूल बातों का अध्ययन करने और इसके तर्क और क्षमताओं में विसर्जन के लिए उपयुक्त है।

लेख को समझने के लिए JS, HTML और CSS का ज्ञान उपयोगी है।

द्रवित इंटरफ़ेस

डी 3 धाराप्रवाह इंटरफ़ेस नामक एक दृष्टिकोण को लागू करता है। कोड पढ़ते समय, यह विधियों की एक श्रृंखला जैसा दिखता है। प्रत्येक विधि को उस ऑब्जेक्ट पर कहा जाता है जो पिछली विधि को लौटाता है। कोड को पढ़ने के लिए सुविधाजनक बनाने के लिए, प्रत्येक कॉल एक अलग लाइन पर स्थित है:

d3.select('body') //    body .append('svg') //   body svg- .append('text') //   svg-  text .text('Click somewhere, please...') //     text .attr('x', 50) //    text .attr('y', 50) .style("fill","firebrick") //    

यह उदाहरण jsfiddle.net पर है

नमूना

डी 3 में, अन्य जेएस पुस्तकालयों के रूप में जो डोम तत्वों के साथ काम करते हैं, दस्तावेज़ के साथ बातचीत दस्तावेज़ में तत्वों की खोज और चयन बनाने के साथ शुरू होती है - तत्वों के एक सेट के लिए एक आवरण। यह चयनित तत्वों को संशोधित करने के लिए पुस्तकालय विधियों तक पहुंच प्रदान करता है।

डी 3 में चयन d3.select () और d3.selectAll () विधियों का उपयोग करके बनाया गया है। एक चयन बनाने के लिए, अगर यह एक पृष्ठ से जुड़ा है (उदाहरण के लिए, jQuery के साथ) तो डी 3, क्वेरीसेलर / क्वेरीसेलेक्टर ऑल या सिज़ल का उपयोग करता है।

 d3.select('span') //   span   d3.selectAll('span') //   span   

परिणामी चयन का उपयोग तत्वों के साथ काम करने और सबसिलेक्शन बनाने के लिए किया जाता है।

 <span> </span> <p> <span> </span> <span></span> <span></span> <span></span> </p> <p> </p> 

 d3.select('span') //   span   .style('color', 'darkgreen') //   d3.selectAll('p') //    .selectAll('span') //   span   . .style('color', 'goldenrod') //   d3.select('p') //      .select('span') //   span    .style('color', 'firebrick') //   

यह उदाहरण jsfiddle.net पर है

हमेशा याद रखें कि आप वर्तमान में किस नमूने के साथ काम कर रहे हैं। डी 3 के साथ काम करते समय सामान्य त्रुटियां: माता-पिता के बजाय एक मूल तत्व पर कॉल करना और एक नॉनकंस्टेंट (हटाए गए या अभी तक नहीं बनाए गए) तत्व के गुणों को बदलने की कोशिश करना।

उदाहरण पहले से ही तत्वों ( चयन (नाम, मूल्य]) ) पर संचालन का उपयोग करता है, फिर हम उन्हें और अधिक विस्तार से विचार करेंगे।

कम्प्यूटिंग मान और फ़ंक्शंस

DOM के साथ काम करने के लिए, D3 सभी कॉल के लिए समान API का उपयोग करता है। आइए एक लोकप्रिय कार्य का एक उदाहरण देखें: किसी तत्व के लिए एक वर्ग जोड़ना या निकालना। ऐसा करने के लिए, हमें कुछ नमूने लेने के तरीकों की आवश्यकता है:

• चयन.वर्गीय (नाम, मान) बूलियन मान के आधार पर वर्ग नाम जोड़ता या हटाता है।
• चयन.ऑन (ईवेंट, कॉलबैक) का उपयोग ईवेंट को संभालने के लिए किया जाता है, ईवेंट इवेंट का नाम (उदाहरण के लिए, "क्लिक") और कॉलबैक हैंडलर फ़ंक्शन को पास करना। इसमें हैंडलर फ़ंक्शंस को वर्तमान तत्व के साथ-साथ तर्कों में डेटा और इंडेक्स कहा जाता है। घटना को चर d3.event में प्राप्त किया जा सकता है। हैंडलर को रिइंस्टाल करने से पहले वाला बदल जाएगा।

 var pressed = false var button = d3.select('button') //   .on('click', function (data, index) { //     button.classed('pressed', pressed = !pressed) //         }) 

यह उदाहरण jsfiddle.net पर है

ध्यान दें कि हम बटन चर में संग्रहीत चयन का उपयोग करते हैं: कॉल (साथ ही वर्गीकृत, एटर, स्टाइल, प्रॉपर्टी, एचटीएमएल, टेक्स्ट) उस चयन को वापस करते हैं जिस पर उन्हें बुलाया जाता है, जो "द्रव" इंटरफेस के लिए विशिष्ट है।

डी 3 एक समान तरीके से स्थानांतरित मूल्यों को संभालता है। यदि आप प्रलेखन में [मूल्य] देखते हैं, तो सबसे अधिक संभावना है कि हम निम्नलिखित के बारे में बात कर रहे हैं:

• यदि आप एक मान जमा करते हैं जो एक फ़ंक्शन है, तो इसे डेटा, इंडेक्स पैरामीटर (नीचे देखें) के साथ बुलाया जाएगा, और संदर्भ (यह ऑब्जेक्ट) एक तत्व, एक डोम नोड होगा।
• यदि आप एक मान की आपूर्ति करते हैं जो एक फ़ंक्शन नहीं है, तो इसे "फ़नकार" में लपेटा जाएगा (एक फ़ंक्शन जो हमेशा पारित मूल्य लौटाता है)
• यदि आप मान की आपूर्ति नहीं करते हैं, तो फ़ंक्शन एक गेटर के रूप में काम करेगा और प्रश्न में मूल्य लौटाएगा (उदाहरण के लिए, चयन.स्टाइल ('रंग') पाठ का रंग वापस कर देगा यदि यह तत्व के लिए सेट है)।

अंतिम बारीकियों को याद रखना महत्वपूर्ण है यदि आप कॉल की एक श्रृंखला का निर्माण कर रहे हैं (इस तरह के एक गेटर आमतौर पर श्रृंखला का अंतिम तत्व होना चाहिए)।

यह समझना महत्वपूर्ण है कि चयन में प्रत्येक तत्व के लिए एक बार मूल्यों या कार्यों का उपयोग किया जाता है, जिसके बाद डी 3 उन्हें "भूल जाता है"। दूसरे शब्दों में, दस्तावेज़ में डेटा सेट या घटनाओं में परिवर्तन डी 3 को "पुनर्गणना" मूल्य के लिए मजबूर नहीं करेगा, इसलिए इस व्यवहार को स्वतंत्र रूप से सेट करने की आवश्यकता है, जैसा कि हमने ऊपर वर्गीकृत किया था।

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

विशिष्ट नमूनाकरण

एक अधिक जटिल उदाहरण में लोकप्रिय तरीकों पर विचार करें जो दर्शाता है कि चयन के माध्यम से दस्तावेज़ के डोम नोड्स के साथ कैसे काम किया जाए:

 var svg = d3.select('body').append('svg') svg .append('text') .text('click somewhere') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return dx || d.pageX }) .attr('cy', function (d) { return dy || d.pageY }) .attr('fill', 'red') .attr('r', 10) circles .exit() .remove() }) 

यह उदाहरण jsfiddle.net पर है

• चयन .html () और चयन.टेक्स्ट () पद्धतियाँ HTML या पाठ के रूप में तत्वों की सामग्री को सेट या वापस करती हैं।
• चयन.स्टाइल () , सेलेक्शन.टैट (), और सेलेक्शन.प्रोपर्टी () विधियाँ तत्व के सीएसएस गुणों, उसकी विशेषताओं और गुणों को सेट या वापस करती हैं। अक्सर हम शैली और अटर का उपयोग करेंगे, खासकर जब नए तत्वों के गुणों का वर्णन करते हैं।
• चयन.आर्मोव () विधि वर्तमान चयन के तत्वों को हटा देती है।
• Selection.append () वर्तमान चयन के प्रत्येक तत्व में एक वंशज जोड़ता है।
• डेटा को Selection.data () में स्थानांतरित किया जाता है, वह DOM तत्व के __data__ के क्षेत्र में संग्रहीत होता है, जब आप चयन पर विधियों को कॉल करते हैं, तो उन्हें तत्व से निकाला जाता है।
• आप किसी भी तत्व का चयन कर सकते हैं या चयन कर सकते हैं।

संबंधित सेट

उदाहरण में, डेटा () पद्धति पर विशेष ध्यान दिया जाना चाहिए। अन्य तरीकों के विपरीत, यह एक संशोधित चयन देता है जो तत्वों की सूची के अलावा, तत्वों के डेटा के पत्राचार को संग्रहीत करता है। जॉइनिंग विथ जॉइन्स के लेख के अनुवाद में , हम प्रवेश () और निकास () विधियों के बारे में विस्तार से बात करते हैं जो इस तरह के चयन और उनके द्वारा प्रदान की जाने वाली संभावनाओं के बारे में है।

एनिमेशन और अनुकूलन

डी 3 में एक तत्व के गुणों में परिवर्तन को चेतन करना आसान है, आपको चयन करने की आवश्यकता है। ट्रान्सट्रैक्शन () विधि। यह विधि एक चयन देता है जो धीरे-धीरे वर्तमान मानों को नए में बदल देता है, एक एनिमेटेड प्रभाव बनाता है। एनीमेशन की अवधि ट्रांज़िशन । अवधि () विधि द्वारा सेट की गई है।

पिछले उदाहरण में तत्वों को जोड़ने और हटाने के दौरान एनीमेशन जोड़ें:

 var svg = d3.select('body').append('svg') svg .append('text') .text('click here') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return dx || d.pageX }) .attr('cy', function (d) { return dy || d.pageY }) .attr('fill', 'red') .attr('r', 0) //   .transition() .duration(1000) //        .attr('r', 10) //   circles .exit() .transition() .attr('r', 0) .remove() }) 

यह उदाहरण jsfiddle.net पर है

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

मैं पाठ्यक्रम "डेटा विज़ुअलाइज़ेशन" पर डी 3 पढ़ाता हूं। यदि आप इस उपकरण में महारत हासिल करना चाहते हैं और इसे अपने काम में लगाना शुरू करते हैं, तो हमारे पास आइए। अगला पाठ्यक्रम मॉस्को में इस सप्ताह के अंत में आयोजित किया जाएगा, रिकॉर्डिंग और प्रतिभागियों की प्रतिक्रिया जनवरी के पाठ्यक्रम में: http://brainwashing.pro/datoliz ।