d3.js
अद्यतन पैटर्न

वाक्य - विन्यास

• selection.enter ()
• selection.exit ()
• selection.merge ()

डेटा को अपडेट करना: चयन, अपडेट और एक्जिट का मूल उदाहरण

एक स्थिर डेटासेट प्रदर्शित करने वाला चार्ट बनाना अपेक्षाकृत सरल है। उदाहरण के लिए, यदि हमारे पास डेटा के रूप में वस्तुओं की यह सरणी है:

var data = [
    {title: "A", value: 53},
    {title: "B", value: 12},
    {title: "C", value: 91},
    {title: "D", value: 24},
    {title: "E", value: 59}
];

हम एक बार चार्ट बना सकते हैं जहां प्रत्येक बार एक माप का प्रतिनिधित्व करता है, जिसका नाम "शीर्षक" है, और इसकी चौड़ाई उस माप के मूल्य का प्रतिनिधित्व करती है। चूंकि यह डेटासेट नहीं बदलता है, हमारे बार चार्ट में केवल "दर्ज" चयन होता है:

var bars = svg.selectAll(".bars")
    .data(data);

bars.enter()
    .append("rect")
    .attr("class", "bars")
    .attr("x", xScale(0))
    .attr("y", function(d){ return yScale(d.title)})
    .attr("width", 0)
    .attr("height", yScale.bandwidth())
    .transition()
    .duration(1000)
    .delay(function(d,i){ return i*200})
    .attr("width", function(d){ return xScale(d.value) - margin.left});

यहां, हम प्रत्येक बार की चौड़ाई को 0 पर सेट कर रहे हैं और संक्रमण के बाद, इसके अंतिम मूल्य पर।

यह प्रवेश चयन, अकेले, हमारे चार्ट बनाने के लिए पर्याप्त है, जिसे आप इस पहेली में देख सकते हैं।

लेकिन क्या होगा अगर मेरा डेटा बदल जाए?

इस मामले में, हमें अपने चार्ट को गतिशील रूप से बदलना होगा। इसे करने का सबसे अच्छा तरीका एक "एन्टर", एक "अपडेट" और एक "एग्जिट" चयन का निर्माण करना है। लेकिन, इससे पहले, हमें कोड में कुछ बदलाव करने होंगे।

सबसे पहले, हम draw() नामक एक फ़ंक्शन के अंदर बदलते भागों को स्थानांतरित करेंगे draw() :

function draw(){
    //changing parts
};

इन "बदलते भागों" में शामिल हैं:

1. प्रवेश, अद्यतन और चयन से बाहर निकलें;
2. प्रत्येक पैमाने का डोमेन;
3. अक्ष का संक्रमण;

उस draw() फ़ंक्शन के अंदर, हम एक और फ़ंक्शन कहते हैं, जो हमारा डेटा बनाता है। यहां, यह केवल एक फ़ंक्शन है जो 5 ऑब्जेक्ट्स की एक सरणी देता है, 10 में से यादृच्छिक रूप से 5 अक्षरों को चुनना (वर्णानुक्रम में छांटना) और, प्रत्येक के लिए, 0 और 99 के बीच का मान:

function getData(){
    var title = "ABCDEFGHIJ".split("");
    var data = [];
    for(var i = 0; i < 5; i++){
        var index = Math.floor(Math.random()*title.length);
        data.push({title: title[index],
            value: Math.floor(Math.random()*100)});
        title.splice(index,1);
    }
    data = data.sort(function(a,b){ return d3.ascending(a.title,b.title)});
    return data;
};

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

var bars = svg.selectAll(".bars")
    .data(data, function(d){ return d.title});

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

इसलिए, हमारे var bars सही ढंग से सेट करने के बाद, हम अपने चयन से निपट सकते हैं। यह निकास चयन है:

bars.exit()
    .transition()
    .duration(1000)
    .attr("width", 0)
    .remove();

और इन में प्रवेश करने और अद्यतन चयन (डी 3 v4.x में, अद्यतन चयन चयन का उपयोग कर प्रवेश के साथ मिला दिया जाता है merge ):

bars.enter()//this is the enter selection
    .append("rect")
    .attr("class", "bars")
    .attr("x", xScale(0) + 1)
    .attr("y", function(d){ return yScale(d.title)})
    .attr("width", 0)
    .attr("height", yScale.bandwidth())
    .attr("fill", function(d){ return color(letters.indexOf(d.title)+1)})
    .merge(bars)//and from now on, both the enter and the update selections
    .transition()
    .duration(1000)
    .delay(1000)
    .attr("y", function(d){ return yScale(d.title)})
    .attr("width", function(d){ return xScale(d.value) - margin.left});

अंत में, हम हर बार बटन को क्लिक करने पर draw() फ़ंक्शन कहते हैं:

d3.select("#myButton").on("click", draw);

और यह इन सभी 3 चयनों को दिखाने वाला फिडल है।

चयन में विलय करना

डी 3 संस्करण 3 में अपडेट पैटर्न

डी 3 का उपयोग करके डेटाविज़ को ठीक से बदलने के लिए "एंट्री", "अपडेट" और "एग्जिट" के चयन का सही तरीका मौलिक है।

डी 3 संस्करण 3 के बाद से (वास्तव में, संस्करण 2 के बाद से), यह स्निपेट "दर्ज करें" और "अपडेट" चयन ( लाइव डेमो यहां ) दोनों के लिए संक्रमण सेट कर सकता है:

var divs = body.selectAll("div")
    .data(data);//binding the data

divs.enter()//enter selection
    .append("div")
    .style("width", "0px");

divs.transition()
    .duration(1000)
    .style("width", function(d) { return d + "px"; })
    .attr("class", "divchart")
    .text(function(d) { return d; });

संक्रमण के बाद यह परिणाम देना:

लेकिन अगर हम D3 संस्करण 4 का उपयोग करते हैं तो ठीक उसी कोड के साथ क्या होता है? आप इसे इस लाइव डेमो में देख सकते हैं: कुछ भी नहीं !

क्यों?

डी 3 संस्करण 4 में अपडेट पैटर्न में बदलाव

कोड चेक करते हैं। सबसे पहले, हम divs । यह चयन डेटा को <div> से जोड़ता है।

var divs = body.selectAll("div")
    .data(data); 

फिर, हमारे पास divs.enter() , जो एक चयन है जिसमें बेजोड़ तत्वों के साथ सभी डेटा शामिल हैं। इस चयन में सभी डिव होते हैं, जब हम फ़ंक्शन draw , और हम उनकी चौड़ाई को शून्य पर सेट करते हैं।

divs.enter()
    .append("div")
    .style("width", "0px");

फिर हमारे पास divs.transition() , और यहां हमारे पास दिलचस्प व्यवहार है: D3 संस्करण 3 में, divs.transition() सभी <div> को "एंटर" चयन में उनकी अंतिम चौड़ाई में बदल देता है। लेकिन इसका कोई मतलब नहीं है! divs में "एन्टर" चयन नहीं होता है, और किसी भी DOM एलिमेंट को संशोधित नहीं करना चाहिए।

ऐसा कारण है कि इस विचित्र व्यवहार को डी 3 संस्करण 2 और 3 ( यहां स्रोत ) में पेश किया गया है, और इसे डी 3 संस्करण में "सही" किया गया था। इस प्रकार, ऊपर लाइव डेमो में, कुछ भी नहीं होता है, और यह अपेक्षित है! इसके अलावा, यदि आप बटन पर क्लिक करते हैं, तो सभी पिछले छह बार दिखाई देते हैं, क्योंकि वे अब "अपडेट" चयन में हैं, अब "एंटर" चयन में नहीं।

"प्रवेश" चयन पर अभिनय करने वाले संक्रमण के लिए, हमें अलग-अलग चर बनाने होंगे या, एक आसान तरीका, चयनों को विलय करना होगा :

divs.enter()//enter selection
    .append("div")
    .style("width", "0px")
    .merge(divs)//from now on, enter + update selections
    .transition().duration(1000).style("width", function(d) { return d + "px"; })
    .attr("class", "divchart")
    .text(function(d) { return d; });

अब, हमने "एंटर" और "अपडेट" सिलेक्शन को मिला दिया। देखें कि यह लाइव डेमो में कैसे काम करता है।