डी 3.जेएस - संक्रमण
संक्रमण एक राज्य से दूसरे आइटम में बदलने की प्रक्रिया है। D3.js एक प्रदान करता हैtransition()HTML पेज में ट्रांजेक्शन करने की विधि। आइए इस अध्याय में संक्रमण के बारे में जानें।
संक्रमण () विधि
संक्रमण () विधि सभी चयनकर्ताओं के लिए उपलब्ध है और यह संक्रमण प्रक्रिया शुरू करता है। यह विधि अधिकांश चयन विधियों का समर्थन करती है जैसे - अटर (), शैली (), आदि, लेकिन, यह एपेंड () और डेटा () विधियों का समर्थन नहीं करता है, जिन्हें संक्रमण () विधि से पहले बुलाया जाना चाहिए। इसके अलावा, यह संक्रमण के लिए विशिष्ट तरीके प्रदान करता है जैसे अवधि (), सहजता (), आदि। एक साधारण संक्रमण को निम्नानुसार परिभाषित किया जा सकता है -
d3.select("body")
.transition()
.style("background-color", "lightblue");एक संक्रमण सीधे d3.transition () विधि का उपयोग करके बनाया जा सकता है और फिर चयनकर्ताओं के साथ निम्नानुसार उपयोग किया जाता है।
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");एक न्यूनतम उदाहरण
आइए अब समझते हैं कि संक्रमण कैसे काम करता है, यह समझने के लिए एक मूल उदाहरण बनाएं
एक नई HTML फ़ाइल बनाएँ, transition_simple.html निम्नलिखित कोड के साथ।
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").transition().style("background-color", "lightblue");
</script>
</body>
</html>यहाँ, हमने चुना है bodyतत्व और फिर संक्रमण () विधि को कॉल करके संक्रमण शुरू कर दिया। फिर, हमने वर्तमान रंग से पृष्ठभूमि का रंग बदलने का निर्देश दिया है,white सेवा light blue।
अब, ब्राउज़र को ताज़ा करें और स्क्रीन पर, पृष्ठभूमि का रंग सफेद से हल्के नीले रंग में बदल जाता है। यदि हम पृष्ठभूमि का रंग हल्के नीले से ग्रे में बदलना चाहते हैं, तो हम निम्नलिखित संक्रमण का उपयोग कर सकते हैं -
d3.select("body").transition().style("background-color", "gray");