d3.js => चयन

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

d3। चयन करें (चयनकर्ता)
d3। चयन (चयनकर्ता)
चयन । चयन करें (चयनकर्ता)
चयन । चयन (चयनकर्ता)
चयन । फ़िल्टर (फ़िल्टर)
चयन । मर्ज (अन्य)

टिप्पणियों

संबंधित रीडिंग:

बुनियादी चयन और संशोधन

यदि आप jQuery और Sizzle सिंटैक्स से परिचित हैं, तो d3 चयन अधिक भिन्न नहीं होने चाहिए। d3 तत्वों को आसान बनाने के लिए W3C चयनकर्ताओं API की नकल करता है।

मूल उदाहरण के लिए, सभी <p> का चयन करें और उनमें से प्रत्येक में एक परिवर्तन जोड़ें:

d3.selectAll('p')
  .attr('class','textClass') 
  .style('color', 'white');

संक्षेप में यह jQuery में कर के रूप में अपेक्षाकृत समान है

$('p')
  .attr('class','textClass') 
  .css('color, 'white')

आम तौर पर आप एसवीजी तत्व को जोड़ने के लिए अपने कंटेनर डिव के लिए एक सिंगल सेलेक्ट से शुरुआत करेंगे जो एक चर को सौंपा जाएगा (जिसे आमतौर पर svg कहा जाता है)।

var svg = d3.select('#divID').append('svg');

यहाँ से हम कई वस्तुओं के हमारे उप-चयन करने के लिए svg पर कॉल कर सकते हैं (भले ही वे अभी तक मौजूद न हों)।

svg.selectAll('path')

अलग-अलग चयनकर्ता

आप विभिन्न चयनकर्ताओं के साथ तत्वों का चयन कर सकते हैं:

टैग द्वारा: "div"
वर्ग द्वारा: ".class"
आईडी द्वारा: "#id"
विशेषता द्वारा: "[color=blue]"
कई चयनकर्ता (OR): "div1, div2, class1"
कई चयनकर्ता (और): "div1 div2 class1"

सिंपल डेटा बाउंड सिलेक्शन

var myData = [
    { name: "test1", value: "ok" },
    { name: "test2", value: "nok" }
]

// We have to select elements (here div.samples)
// and assign data. The second parameter of data() is really important,
// it will determine the "key" to identify part of data (datum) attached to an 
// element.
var mySelection = d3.select(document.body).selectAll("div.samples") // <- a selection
                   .data(myData, function(d){ return d.name; }); // <- data binding

// The "update" state is when a datum of data array has already
// an existing element associated.
mySelection.attr("class", "samples update")

// A datum is in the "enter" state when it's not assigned
// to an existing element (based on the key param of data())
// i.e. new elements in data array with a new key (here "name")
mySelection.enter().append("div")
    .attr("class", "samples enter")
    .text(function(d){ return d.name; });

// The "exit" state is when the bounded datum of an element
// is not in the data array
// i.e. removal of a row (or modifying "name" attribute)
// if we change "test1" to "test3", "test1" bounded
//          element will figure in exit() selection
// "test3" bounded element will be created in the enter() selection
mySelection.exit().attr("class", "samples remove");

"प्रवेश" चयन में प्लेसहोल्डर्स की भूमिका

एक प्रवेश चयन क्या है?

D3.js में, जब कोई DOM तत्वों को डेटा बांधता है, तो तीन स्थितियां संभव हैं:

तत्वों की संख्या और डेटा बिंदुओं की संख्या समान हैं;
डेटा बिंदुओं की तुलना में अधिक तत्व हैं;
तत्वों की तुलना में अधिक डेटा बिंदु हैं;

# 3 स्थिति में, एक संबंधित DOM तत्व के बिना सभी डेटा बिंदु प्रवेश चयन के हैं। इस प्रकार, D3.js में, एंटर सिलेक्शन ऐसे सिलेक्शन होते हैं, जो डेटा में एलिमेंट्स को शामिल करने के बाद, उन सभी डेटा को शामिल करते हैं जो किसी DOM तत्व से मेल नहीं खाते हैं। यदि हम एक का उपयोग append एक प्रवेश चयन में समारोह, डी 3 कि हमारे लिए डेटा बाइंडिंग नए तत्व पैदा करेगा।

यह डेटा बिंदुओं की संख्या / DOM तत्वों की संख्या के बारे में संभावित स्थितियों की व्याख्या करने वाला एक वेन आरेख है:

जैसा कि हम देख सकते हैं, प्रवेश चयन बाईं ओर नीला क्षेत्र है: संबंधित डोम तत्वों के बिना डेटा बिंदु।

प्रवेश चयन की संरचना

आमतौर पर, एक प्रवेश चयन में ये 4 चरण होते हैं:

selectAll : DOM में तत्वों का चयन करें;
data : data गणना और पार्स करता है;
enter : डेटा के साथ चयन की तुलना, नए तत्व बनाता है;
append : DOM में वास्तविक तत्वों को जोड़ना;

यह एक बहुत ही बुनियादी उदाहरण है ( var divs में 4 चरणों को देखें):

var data = [40, 80, 150, 160, 230, 260];

var body = d3.select("body");

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

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

और यह परिणाम है ( यहाँ jsfiddle ):

ध्यान दें कि, इस मामले में, हमने अपने "एन्टर" चयन चर में पहली पंक्ति के रूप में selectAll("div") उपयोग किया। हमारे पास 6 मानों वाला डेटासेट है, और D3 ने हमारे लिए 6 divs बनाए हैं।

प्लेसहोल्डर्स की भूमिका

लेकिन मान लीजिए कि हमारे दस्तावेज़ में पहले से ही एक div है, कुछ इस तरह <div>This is my chart</div> शीर्ष पर। उस मामले में, जब हम लिखते हैं:

body.selectAll("div")

हम उस अस्तित्वगत विभाग का चयन कर रहे हैं। तो, हमारे प्रवेश चयन में बिना मिलान वाले तत्वों के केवल 5 डाटाम होंगे। उदाहरण के लिए, इस jsfiddle में , जहां HTML में पहले से ही एक div है ("यह मेरा चार्ट है"), यह परिणाम होगा:

हम "40" को अब और नहीं देखते हैं: हमारा पहला "बार" गायब हो गया है, और इसका कारण यह है कि हमारे "प्रवेश" चयन में अब केवल 5 तत्व हैं।

यहाँ हमें जो समझना है, वह यह है कि हमारे एंटर सिलेक्शन वैरिएबल, selectAll("div") की पहली पंक्ति में, वे selectAll("div") सिर्फ प्लेसहोल्डर हैं । हम सभी का चयन करने की जरूरत नहीं divs अगर हम जोड़कर कर रहे हैं divs , या सभी circle हम जोड़कर कर रहे हैं circle । हम अलग-अलग चीजों का चयन कर सकते हैं। और, अगर हमारे पास "अपडेट" या "निकास" चयन की योजना नहीं है, तो हम कुछ भी चुन सकते हैं:

var divs = body.selectAll(".foo")//this class doesn't exist, and never will!
    .data(data)
    .enter()
    .append("div");

इस तरह से, हम सभी ".foo" का चयन कर रहे हैं। यहां, "फू" एक ऐसा वर्ग है जो न केवल अस्तित्व में है, बल्कि यह कोड में कहीं और कभी नहीं बनाया गया है! लेकिन इससे कोई फर्क नहीं पड़ता, यह केवल एक प्लेसहोल्डर है। तर्क यह है:

यदि आपके "एंटर" सेलेक्शन में आप किसी ऐसी चीज का चयन करते हैं जो मौजूद नहीं है, तो आपके "एंटर" सिलेक्शन में हमेशा आपका सारा डेटा होगा।

अब, .foo चयन करते .foo , हमारे "एंटर" चयन में 6 तत्व हैं, भले ही हमारे पास पहले से ही दस्तावेज़ में एक div है:

और यहाँ इसी jsfiddle है ।

null का चयन करना

अब तक, यह गारंटी देने का सबसे अच्छा तरीका है कि आप कुछ भी नहीं चुन रहे हैं, null । इतना ही नहीं, लेकिन यह विकल्प किसी भी अन्य की तुलना में तेजी से है।

इस प्रकार, एक प्रवेश चयन के लिए, बस करें:

selection.selectAll(null)
    .data(data)
    .enter()
    .append(element);

यहाँ एक डेमो फ़िडल है: https://jsfiddle.net/gerardofurtado/th6s160p/

निष्कर्ष

"प्रवेश" चयनों के साथ काम करते समय, ध्यान रखें कि पहले से मौजूद कुछ का चयन न करें। आप अपने selectAll में कुछ भी उपयोग कर सकते हैं, यहां तक कि चीजें जो मौजूद नहीं हैं और कभी भी मौजूद नहीं होंगी (यदि आपके पास "अपडेट" या "निकास" चयन की योजना नहीं है)।

उदाहरणों में कोड माइक बोस्टॉक के इस कोड पर आधारित है: https://bl.ocks.org/mbostock/7322386

एक तीर फ़ंक्शन के साथ "यह" का उपयोग करना

D3.js में अधिकांश फ़ंक्शन एक अनाम फ़ंक्शन को एक तर्क के रूप में स्वीकार करते हैं। सामान्य उदाहरण हैं .attr , .style , .text , .on और .data , लेकिन सूची की तुलना में जिस तरह से बड़ा है।

ऐसे मामलों में, प्रत्येक चयनित तत्व के लिए अनाम फ़ंक्शन का मूल्यांकन किया जाता है, क्रम में, पारित किया जा रहा है:

वर्तमान डेटा ( d )
वर्तमान सूचकांक ( i )
वर्तमान समूह ( nodes )
this वर्तमान DOM तत्व के रूप में है।

डेटम, इंडेक्स और करंट ग्रुप को तर्कों के रूप में पारित किया जाता है, डी 3 में सबसे पहला, दूसरा और तीसरा तर्क। जेएस (जिनके मापदंडों को पारंपरिक रूप से d , i और p को डी 3 वी 3 एक्स में नाम दिया गया है)। प्रयोग करने के लिए this , हालांकि, एक किसी भी तर्क का उपयोग करने के लिए की जरूरत नहीं है:

.on("mouseover", function(){
    d3.select(this);
});

ऊपर दिए गए कोड का चयन करेंगे this जब माउस तत्व खत्म हो गया है। इस फिडेल में काम करने की जाँच करें: https://jsfiddle.net/y5fwgopx/

तीर का कार्य

एक नए ES6 सिंटैक्स के रूप में, फंक्शन एक्सप्रेशन की तुलना में एरो फंक्शन में एक छोटा सिंटैक्स होता है। हालांकि, एक डी 3 प्रोग्रामर के लिए जो this लगातार उपयोग करता है, एक नुकसान है: एक तीर फ़ंक्शन अपना स्वयं का this संदर्भ नहीं बनाता है। मतलब यह है कि एक तीर समारोह में, कि, this संलग्नित संदर्भ से अपने मूल अर्थ है।

यह कई परिस्थितियों में उपयोगी हो सकता है, लेकिन यह एक सांकेतिक शब्दों में बदलनेवाला का उपयोग करने के आदी के लिए एक समस्या है this डी 3 में। उदाहरण के लिए, ऊपर दिए गए लेख में समान उदाहरण का उपयोग करने से यह काम नहीं करेगा:

.on("mouseover", ()=>{
    d3.select(this);
});

यदि आपको इसमें संदेह है, तो यहाँ पर यह है: https://jsfiddle.net/tfxLsv9u/

ठीक है, यह एक बड़ी समस्या नहीं है: एक बस जरूरत पड़ने पर एक नियमित, पुराने ढंग के फंक्शन अभिव्यक्ति का उपयोग कर सकता है। लेकिन क्या होगा अगर आप एरो फ़ंक्शंस का उपयोग करके अपने सभी कोड लिखना चाहते हैं? क्या एरो फ़ंक्शंस के साथ एक कोड होना संभव है और अभी भी डी 3 में this ठीक से उपयोग करना है?

दूसरे और तीसरे तर्क संयुक्त

इसका उत्तर हां में है , क्योंकि this वही nodes[i] । संकेत वास्तव में डी 3 एपीआई पर मौजूद है, जब यह इसका वर्णन करता है:

... के साथ this वर्तमान डोम तत्व के रूप में ( nodes[i] )

स्पष्टीकरण सरल है: चूंकि nodes डोम में तत्वों का वर्तमान समूह है और i प्रत्येक तत्व का सूचकांक nodes[i] , nodes[i] वर्तमान डोम तत्व को संदर्भित करता है। यही है, this ।

इसलिए, एक का उपयोग कर सकते हैं:

.on("mouseover", (d, i, nodes) => {
    d3.select(nodes[i]);
});

और यहाँ संगत पहेली है: https://jsfiddle.net/2p2ux38s/

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

d3.js
चयन

खोज…