यह कुंजी समारोह, selection.data को दूसरा तर्क का उद्देश्य है: यह आप को नियंत्रित करने के जो गृहीत जो तत्व करने के लिए बाध्य हो जाता है द्वारा object constancy बनाए रखने की सुविधा देता है। उदाहरण के लिए, मान लीजिए कि आप फल का प्रतिनिधित्व करने में ऑब्जेक्ट की श्रृंखला थी:
var fruits = [
{name: "orange", value: 200},
{name: "apple", value: 124},
{name: "banana", value: 32}
];
जब आप पहली बार तत्वों को बनाने के लिए, आप एक कुंजी समारोह क्योंकि वहाँ किसी भी मौजूदा तत्वों नहीं हैं की जरूरत नहीं है, और इसलिए आप उपयोग कर सकते हैं मानक selectAll-डेटा-प्रवेश-संलग्न पैटर्न:
var div = d3.select("body").selectAll(".fruit")
.data(fruits)
.enter().append("div")
.attr("class", "fruit")
.text(function(d) { return d.name + ": " + d.value; });
इस ऑपरेशन का परिणाम है:
<body>
<div class="fruit">orange: 200</div>
<div class="fruit">apple: 124</div>
<div class="fruit">banana: 32</div>
</body>
लेकिन अब के अपने डेटा परिवर्तन का कहना है, और आप Refle को अपडेट करना चाहते हैं नया डेटा सीटी। इस नए डेटा भिन्न क्रम में हो सकता है, और कुछ तत्वों को जोड़ा जा सकता है या हटा दिया:
var fruits2 = [
{name: "apple", value: 124},
{name: "lemon", value: 17},
{name: "banana", value: 32},
{name: "strawberry", value: 1465}
];
सेब और केले मूल डेटा में थे, और इसलिए हम उनके रखना चाहते हैं। इसे अद्यतन चयन कहा जाता है। स्ट्रॉबेरी और नींबू नए हैं; यह चयन दर्ज करें। और आखिर में संतरे दूर चला गया, बाहर निकलने चयन का निर्माण।
डेटाम की name संपत्ति को संदर्भित करने वाले एक महत्वपूर्ण फ़ंक्शन का उपयोग करके, हम पुराने तत्वों को नए तत्वों को लक्षित कर सकते हैं। फिर हम में प्रवेश फल बना सकते हैं और हटाने बाहर निकलने फल:
var div = d3.select("body").selectAll(".fruit")
.data(fruits2, function(d) { return d.name; });
div.enter().append("div")
.attr("class", "fruit")
.text(function(d) { return d.name + ": " + d.value; });
div.exit().remove();
यह general update pattern कहा जाता है। (। आप यह पहली बार के आसपास किया जा सकता है, यह selectAll-डेटा-प्रवेश-संलग्न पैटर्न के अधिक सामान्य रूप है) परिणाम है:
<body>
<div class="fruit">apple: 124</div>
<div class="fruit">banana: 32</div>
<div class="fruit">lemon: 17</div>
<div class="fruit">strawberry: 1465</div>
</body>
चयन div के आदेश डेटा से मेल खाता जबकि fruit2 , डीओएम में आदेश नहीं है क्योंकि प्रवेश तत्व शरीर के अंत में जोड़े गए थे। (चयन।आदेश देने की गारंटी के लिए संलग्न कोई फैंसी तर्क नहीं है; यह सिर्फ माता-पिता के अंत में नए तत्व जोड़ता है।) एसवीजी का उपयोग करते समय, हम अक्सर डीओएम तत्वों के आदेश की परवाह नहीं करते हैं क्योंकि सब कुछ बिल्कुल स्थित है। आप के बारे में देखभाल कर हैं, तो आप प्रवेश करने के बाद इसे ठीक करने selection.order उपयोग कर सकते हैं:
div.order(); // make the DOM element order match the selection
इसके अलावा, इस उदाहरण में, हम अद्यतन चयन में कोई परिवर्तन करने के लिए, की जरूरत नहीं है, क्योंकि मानों सेब और केले के लिए नहीं बदला था। यदि अद्यतन डेटा भी बदलता है, तो आप चयन.एटीआर और select.text पर श्रृंखला कॉल को सीधे चयन.data कॉल से बंद कर सकते हैं।
धन्यवाद माइक !!!! उत्तर के लिए – ehsan
THx। मैं चयन.ऑर्डर() को दो अर्ध समान स्थिति में उपयोग करता हूं, और एक बार यह काम करता है, एक बार ऐसा नहीं होता है। चयन का क्रम वास्तव में क्या है? क्या यह डेटा फ़ंक्शन को दी गई कुंजी पर निर्भर करता है? – JulienFr
मुझे लगता है कि उत्तर "[enter.append पर सुविधाजनक साइड-इफेक्ट है: यह एंटर चयन से नए बनाए गए तत्वों के साथ अद्यतन चयन में शून्य तत्वों को प्रतिस्थापित करता है। इस प्रकार, enter.append के बाद, अद्यतन चयन है तत्वों को दर्ज करने और अपडेट करने के लिए संशोधित किया गया।] (https://bost.ocks.org/mike/selection/#enter-update) "। हालांकि, यह मेरे [परीक्षण] में सच नहीं लगता है (https://gist.github.com/an0/a924bf0d25e43d71584402dff6e28344)। अद्यतन अद्यतन अभी भी enter.append के बाद अपडेट शामिल है। 'अपडेट' के 'मर्ज' पर 'ऑर्डर' और इसे काम करने के लिए 'एंटर' पर कॉल करना होगा। क्यूं कर? – an0