क्या कोई कृपया D3.js में डेटा () और डेटा () के बीच अंतर बता सकता है? मैं देखता हूं कि दोनों का उपयोग किया जा रहा है और मुझे यकीन नहीं है कि आपको दूसरे पर एक क्यों चुनना चाहिए?
क्या कोई कृपया D3.js में डेटा () और डेटा () के बीच अंतर बता सकता है? मैं देखता हूं कि दोनों का उपयोग किया जा रहा है और मुझे यकीन नहीं है कि आपको दूसरे पर एक क्यों चुनना चाहिए?
जवाबों:
मुझे खुद माइक से यहाँ सही उत्तर मिला:
डी 3 - JSON डेटा संरचनाओं से कैसे निपटें?
यदि आप अपने डेटा को किसी एकल एसवीजी तत्व से बांधना चाहते हैं, तो उपयोग करें
(...).data([data])या
(...).datum(data)यदि आप अपने डेटा को कई एसवीजी तत्वों से बांधना चाहते हैं
(...).data(data).enter().append("svg").....
enter(), डी 3 शेष एरीजी तत्वों को नए बनाए गए एसवीजी तत्वों के साथ बांध देगा।
इस पर थोड़ा गौर करने के बाद, मैंने पाया है कि SO पर यहाँ उत्तर पूर्ण नहीं हैं क्योंकि वे केवल उस मामले को कवर करते हैं जब आप चालान करते हैं selection.dataऔर selection.datumएक इनपुट dataपैरामीटर के साथ। उस परिदृश्य में भी, दोनों अलग-अलग व्यवहार करते हैं यदि चयन एकल तत्व बनाम है जब इसमें कई तत्व होते हैं। इसके अलावा, इन दोनों विधियों को चयन में बाध्य डेटा / डेटा को क्वेरी करने के लिए किसी भी इनपुट तर्क के बिना भी लागू किया जा सकता है, जिस स्थिति में वे एक बार फिर से अलग व्यवहार करते हैं और विभिन्न चीजों को वापस करते हैं।
संपादित करें - मैंने इस सवाल का थोड़ा और विस्तृत उत्तर यहां पोस्ट किया है, लेकिन नीचे की पोस्ट दो तरीकों के बारे में सभी प्रमुख बिंदुओं को कैप्चर करती है और वे एक-दूसरे से कैसे भिन्न हैं।
इनपुट तर्क केdata रूप में आपूर्ति करते समय
selection.data(data)के तत्वों के बीच-में शामिल होने के डेटा एक प्रदर्शन करने का प्रयास करेंगे dataचयन के निर्माण में जिसके परिणामस्वरूप के साथ सरणी enter(), exit()और update()चयन है कि आप बाद में पर काम कर सकते हैं। इसका अंतिम परिणाम यह है कि यदि आप किसी सरणी में पास होते हैं data = [1,2,3], तो चयन के साथ प्रत्येक व्यक्तिगत डेटा तत्व (यानी डेटम) में शामिल होने का प्रयास किया जाता है। चयन के प्रत्येक तत्व में केवल उसी का एक डेटम तत्व dataहोगा।
selection.datum(data)डाटा-जॉइन प्रक्रिया को पूरी तरह से दरकिनार कर देता है। यह केवल dataचयन में सभी तत्वों की संपूर्णता को डेटा-जॉइन के मामले में विभाजित किए बिना पूरी तरह से प्रदान करता है । इसलिए यदि आप data = [1, 2, 3]अपने डोमेन के प्रत्येक तत्व को एक संपूर्ण सरणी बाँधना चाहते हैं selection, तो selection.datum(data)इसे प्राप्त करेंगे।
चेतावनी: बहुत से लोग मानते हैं कि
selection.datum(data)यह बराबर हैselection.data([data])लेकिन यह केवल सच है अगरselectionइसमें एक भी तत्व हो । यदिselectionएकाधिक DOM तत्व शामिल हैं, तोचयन में हर एक तत्वselection.datum(data)की संपूर्णता को बांध देगाdata। इसके विपरीत,selection.data([data])केवलdataपहले तत्वकी संपूर्णता को बांधताहैselection। यह डेटा-जुड़ने के व्यवहार के अनुरूप हैselection.data।
जब कोई dataइनपुट तर्क की आपूर्ति
selection.data()चयन में प्रत्येक तत्व के लिए बाध्य डेटा ले जाएगा और उन्हें एक सरणी में लौटाया जाएगा। इसलिए, यदि आपके selectionडेटा के साथ 3 DOM तत्व शामिल हैं "a", "b"और "c"क्रमशः प्रत्येक के लिए बाध्य, selection.data()रिटर्न ["a", "b", "c"]। यह ध्यान रखना महत्वपूर्ण है कि यदि selectionएक एकल तत्व (उदाहरण के माध्यम से) के साथ "a"बाध्य है, तो selection.data()वापस आ जाएगा ["a"]और "a"कुछ के रूप में उम्मीद नहीं की जा सकती है।
selection.datum()केवल एक ही चयन के लिए समझ में आता है क्योंकि यह परिभाषित किया जाता है कि चयन के पहले तत्व के लिए बाध्य डेटम वापस करना है । इसलिए ऊपर दिए गए उदाहरण में "a", बाउंड डेटम के साथ DOM तत्वों से युक्त चयन के साथ , "b"और "c", selection.datum()बस वापस आ जाएगी "a"।
ध्यान दें कि भले ही
selectionएक ही तत्व हो,selection.datum()औरselection.data()विभिन्न मान लौटाएं। पूर्व चयन के लिए बाध्य डेटम ("a"ऊपर के उदाहरण में) देता है जबकि उत्तरार्द्ध बाध्य डेटम को एक सरणी (["a"]उदाहरण में) के भीतर लौटाता है ।
उम्मीद है कि यह स्पष्ट करता है कि इनपुट तर्क के रूप में डेटा प्रदान करते समय selection.dataऔर selection.datum()एक दूसरे से और अलग - अलग कैसे इनपुट इनपुट प्रदान नहीं करके बाध्य डेटा के लिए क्वेरी करते समय।
PS - यह समझने का सबसे अच्छा तरीका है कि यह कैसे काम करता है क्रोम में एक खाली HTML दस्तावेज़ के साथ शुरू करें और कंसोल को खोलें और दस्तावेज़ में कुछ तत्वों को जोड़ने का प्रयास करें और फिर डेटा का उपयोग करके बाध्यकारी शुरू करें selection.dataऔर selection.datum। कभी-कभी, यह पढ़ने से कुछ करके "ग्रॉक" करना बहुत आसान होता है।
यहाँ कुछ अच्छे लिंक दिए गए हैं:
डी 3 "डेटा ()" पर अच्छी चर्चा: यह समझना कि डी 3 कैसे डेटा को नोड्स से बांधता है
प्रति बाद:
# selection.data([values[, key]])वर्तमान चयन के साथ डेटा की निर्दिष्ट सारणी में शामिल होता है। निर्दिष्ट मान डेटा मानों की एक सरणी है, जैसे संख्याओं या ऑब्जेक्ट्स की एक सरणी, या एक फ़ंक्शन जो मानों की एक सरणी लौटाता है।
...
# selection.datum([value])प्रत्येक चयनित तत्व के लिए बाध्य डेटा प्राप्त या सेट करता है। चयन विधि के विपरीत, यह विधि किसी जुड़ाव की गणना नहीं करती है (और इस तरह प्रवेश और निकास चयन की गणना नहीं करती है)।
मुझे लगता है कि HamsterHuey द्वारा दिया गया स्पष्टीकरण अब तक का सबसे अच्छा है। इस पर विस्तार करने और मतभेदों को मैं एक नमूना दस्तावेज है कि के बीच मतभेद की कम से कम हिस्सा दिखाता बनाया का एक दृश्य प्रतिनिधित्व देने के लिए dataऔर datum।
नीचे दिए गए उत्तर में इन तरीकों का उपयोग करने से प्राप्त एक राय है, लेकिन मुझे गलत होने पर सही होने की खुशी है।
यह उदाहरण नीचे या इस फिडेल में चलाया जा सकता है ।
const data = [1,2,3,4,5];
const el = d3.select('#root');
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node => data: ${d}`);
const join= el
.selectAll('div.b')
.data(data);
join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)मुझे लगता है कि datumयह आसान है क्योंकि यह शामिल नहीं होता है, लेकिन निश्चित रूप से इसका मतलब यह भी है कि इसके उपयोग के मामले अलग हैं।
मेरे लिए एक बड़ा अंतर - हालाँकि कुछ और भी हैं - यह तथ्य यह dataहै कि एक डी 3 चार्ट पर अपडेट (लाइव) अपडेट करने का सिर्फ प्राकृतिक तरीका है, क्योंकि पूरा प्रवेश / अपडेट / निकास पैटर्न इसे सरल बनाता है, एक बार जब आप इसे प्राप्त करते हैं।
datumदूसरी ओर मुझे स्थिर अभ्यावेदन के लिए अधिक अनुकूल प्रतीत होता है। उदाहरण के लिए नीचे दिए गए उदाहरण में मैं मूल सरणी पर अपने लूपिंग और उसी तरह सूचकांक द्वारा डेटा तक पहुंचने के समान परिणाम प्राप्त कर सकता हूं:
data.map((n, i) => {
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node-${n} => data: ${d[i]}`);
});इसे यहाँ आज़माएँ: https://jsfiddle.net/gleezer/e4m6j2d8/6/
फिर से, मुझे लगता है कि यह समझ में आसान है क्योंकि आप एंटर / अपडेट / एग्जिट पैटर्न से आने वाले मानसिक बोझ से मुक्त रहते हैं, लेकिन जैसे ही आपको चयन को अपडेट करने या बदलने की आवश्यकता होती है, आप निश्चित रूप से बेहतर विकल्प का सहारा लेंगे .data()।
const data = [1,2,3,4,5];
const el = d3.select('#root');
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node => data: ${d}`);
const join= el
.selectAll('div.b')
.data(data);
join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)/* Ignore all the css */
html {
font-family: arial;
}
.l {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin: 10px 0;
}
.l-a {
background: #cf58e4;
}
.l-b {
background: #42e4e4;
}
.a {
border-bottom: 2px solid #cf58e4;
}
.b {
border-bottom: 2px solid #42e4e4;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>
<div style="margin-bottom: 20px;">
<span class="l l-a"></span> .datum() <br />
<span class="l l-b"></span> .data()
</div>
<div id="root"></div>