👨🏻‍🚀 🔨 😗 इंटरएक्टिव ग्लोब - एसवीजी बनाम कैनवस 🚫 ♎️ 👨🏼‍🍳

शुभ दिन, प्रिय पाठक! पिछली बार हमने एक इंटरेक्टिव हॉरपलेट मानचित्र बनाने की प्रक्रिया का अध्ययन किया था, अब मैं कार्य को थोड़ा जटिल करने और पृथ्वी के तीन-आयामी मॉडल की ओर बढ़ने का प्रस्ताव करता हूं, जिसे लोकप्रिय रूप से ग्लोब कहा जाता है। हम दो प्रकार के ग्लोब करेंगे: एसवीजी संस्करण और कैनवस संस्करण। दोनों ही मामलों में, हम d3.js जावास्क्रिप्ट लाइब्रेरी का उपयोग करेंगे। प्रत्येक विकल्प के अपने फायदे हैं। मेरे प्रदर्शन में, ब्लू प्लैनेट इस प्रकार है:

ग्रह पृथ्वी

और कैसे महाद्वीपों और महासागरों के साथ अपनी दुनिया बनाने के लिए कटौती के तहत पाया जा सकता है।

शुरुआत

पहले हमें जियोडेटा खोजने की जरूरत है। पिछली बार की तरह, हम इन उद्देश्यों के लिए TopoJSON का उपयोग करेंगे। आप इसे "कार्टोग्राफिक मैटर्स" अनुभाग में पिछले लेख में कैसे प्राप्त करें, इसके बारे में पढ़ सकते हैं। और इसलिए हमारे पास TopoJSON फ़ाइल world-110m.json m.json है, जिसमें 1: 110,000,000, या 1 सेमी = 1,100 किमी (1 1, = 1,736 मील) के पैमाने के साथ एक मैप है और फॉर्म id world-110m-country-names.tsv नाम के साथ फ़ाइल world-110m-country-names.tsv नाम। देश का नाम। नामों के साथ एक बाहरी फ़ाइल सुविधा के लिए उपयोग की जाती है, क्योंकि इस मामले में आप आसानी से किसी भी भाषा में नामों का अनुवाद कर सकते हैं। सब कुछ, आप दुनिया के निर्माण के लिए सीधे आगे बढ़ सकते हैं।

टिप्पणी:

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

एक इंटरैक्टिव ग्लोब ड्रा करें

हमारा लक्ष्य एक ग्लोब होगा जो यह कर सकता है:

भूमि के लिए माउस "हथियाने" को घुमाएं
सूची से चयनित देश पर ग्लोब केंद्रित करें

उन लोगों के लिए टेम्पलेट जिन्हें इसकी आवश्यकता है।

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nice title</title> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/queue.v1.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script> </head> <style> Your awesome CSS </style> <body> <h1>Cool Header</h1> <script> Your awesome d3.js code </script> </body> </html>

मुख्य चर को परिभाषित करें और DOM तत्वों को जोड़ें।

  var width = 600, height = 500, sens = 0.25, focused; //Setting projection var projection = d3.geo.orthographic() .scale(245) .rotate([0, 0]) .translate([width / 2, height / 2]) .clipAngle(90); var path = d3.geo.path() .projection(projection); //SVG container var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); //Adding water svg.append("path") .datum({type: "Sphere"}) .attr("class", "water") .attr("d", path); var countryTooltip = d3.select("body").append("div").attr("class", "countryTooltip"), countryList = d3.select("body").append("select").attr("name", "countries");

sens चर माउस के साथ रोटेशन की सटीकता के लिए जिम्मेदार है, और focused उपयोग चयनित (केंद्रित) देश के लिए ट्रिगर के रूप focused किया जाता है। आप विकिपीडिया पर उपयोग किए गए प्रक्षेपण के बारे में पढ़ सकते हैं: ऑर्थोग्राफ़िक प्रक्षेपण । TheclipAngle () विधि यह निर्धारित करती है कि हम गोले के किस भाग को प्रदर्शित करेंगे (या बल्कि देखेंगे), आप विकिपीडिया पर इसके बारे में फिर से पढ़ सकते हैं: छोटे वृत्त की कतरन । बाकी को स्पष्टीकरण की आवश्यकता नहीं है।

इसके बाद, हम क्यू.जेएस लाइब्रेरी का उपयोग करके अपनी फाइलें अपलोड करते हैं, जो हमें एसिंक्रोनस रूप से ऐसा करने की अनुमति देता है।

  queue() .defer(d3.json, "data/world-110m.json") .defer(d3.tsv, "data/world-110m-country-names.tsv") .await(ready);

अब मुख्य कार्य पर चलते हैं, हमारे मामले में इसे ready कहा जाता है। सबसे पहले, हम अपनी ड्रॉपडाउन सूची में देश के नाम जोड़ते हैं और विश्व के देशों को आकर्षित करते हैं।

  function ready(error, world, countryData) { var countryById = {}, countries = topojson.feature(world, world.objects.countries).features; //Adding countries to select countryData.forEach(function(d) { countryById[d.id] = d.name; option = countryList.append("option"); option.text(d.name); option.property("value", d.id); }); //Drawing countries on the globe var world = svg.selectAll("path.land") .data(countries) .enter().append("path") .attr("class", "land") .attr("d", path)

आइए माउस इवेंट को संसाधित करने के लिए आगे बढ़ते हैं। यहाँ drag.origin () में स्पष्टीकरण की आवश्यकता है, यह हमें एक तत्व पर कब्जा करते समय, हमारे मामले अक्षांश और देशांतर में "मूल" (वास्तविक) निर्देशांक सेट करने की अनुमति देता है।

  //Drag event .call(d3.behavior.drag() .origin(function() { var r = projection.rotate(); return {x: r[0] / sens, y: -r[1] / sens}; }) .on("drag", function() { var rotate = projection.rotate(); projection.rotate([d3.event.x * sens, -d3.event.y * sens, rotate[2]]); svg.selectAll("path.land").attr("d", path); svg.selectAll(".focused").classed("focused", focused = false); })) //Mouse events .on("mouseover", function(d) { countryTooltip.text(countryById[d.id]) .style("left", (d3.event.pageX + 7) + "px") .style("top", (d3.event.pageY - 15) + "px") .style("display", "block") .style("opacity", 1); }) .on("mouseout", function(d) { countryTooltip.style("opacity", 0) .style("display", "none"); }) .on("mousemove", function(d) { countryTooltip.style("left", (d3.event.pageX + 7) + "px") .style("top", (d3.event.pageY - 15) + "px"); });

देश पर ध्यान केंद्रित करने के लिए, हमें एक समारोह लिखने की जरूरत है, जो हमें देश के लिए अपने id के नाम से जियोडाटा लौटाए। असल में, यहाँ वह है।

  function country(cnt, sel) { for(var i = 0, l = cnt.length; i < l; i++) { if(cnt[i].id == sel.value) {return cnt[i];} } };

अब आप सीधे सूची से चुने गए देश पर ध्यान केंद्रित करने (केंद्रित) के कार्यान्वयन के लिए आगे बढ़ सकते हैं।

  //Country focus on option select d3.select("select").on("change", function() { var rotate = projection.rotate(), focusedCountry = country(countries, this), p = d3.geo.centroid(focusedCountry); svg.selectAll(".focused").classed("focused", focused = false); //Globe rotating (function transition() { d3.transition() .duration(2500) .tween("rotate", function() { var r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]); return function(t) { projection.rotate(r(t)); svg.selectAll("path").attr("d", path) .classed("focused", function(d, i) { return d.id == focusedCountry.id ? focused = d : false; }); }; }) .transition(); })(); });

यहां, सभी नमक ट्रांस्ज़िट में हैं। ट्विन () , जो हमें प्रत्येक प्रक्षेपित मूल्य के लिए दिए गए फ़ंक्शन (रोटेशन) को कॉल करने की अनुमति देता है।

कताई, नीली गेंद को कताई।

यह बात है - एसवीजी ग्लोब तैयार है। GitHub पर स्रोत पाए जा सकते हैं (वहां आप उन लोगों के लिए भी प्रश्न पूछ सकते हैं, जिन्होंने केवल- हैब्रहाब्र पर पढ़ा है ), और आप bl.ocks.org सेवा के माध्यम से परिणाम महसूस कर सकते हैं।

आइए देखें एसवीजी के फायदे:

डोम तत्वों के साथ बातचीत करने की क्षमता, विशेष path
सीएसएस का उपयोग करने की क्षमता (पिछले पैराग्राफ के परिणामस्वरूप)
पाठ पाठ है, सभी आगामी लाभ के साथ

पृथ्वी ग्रह एनीमेशन

एसवीजी कार्यान्वयन के साथ यह सुलझा हुआ लगता है, आइए देखें कि कैनवास पर ऐसा कुछ कैसे किया जाए। पृथ्वी के घूर्णन का एक सरल एनीमेशन बनाएं। यहां बहुत कुछ पिछले उदाहरण के समान होगा। कोड पर्याप्त नहीं है, इसलिए मैं इसे एक ही बार में लाऊंगा।

  var width = 800, height = 500; var projection = d3.geo.orthographic() .scale(245) .rotate([180, 0]) .translate([width / 2, height / 2]) .clipAngle(90); var canvas = d3.select("body").append("canvas") .attr("width", width) .attr("height", height); var c = canvas.node().getContext("2d"); var path = d3.geo.path() .projection(projection) .context(c); function getImage(path, callback) { var img = new Image(); img.src = path; img.onload = callback(null, img); } queue() .defer(d3.json, "data/world-110m.json") .defer(d3.tsv, "data/world-110m-country-names.tsv") .defer(getImage, "data/space.jpg") .await(ready); //Main function function ready(error, world, countryData, space) { var globe = {type: "Sphere"}, land = topojson.feature(world, world.objects.land), borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }); //Earth rotating (function transition() { d3.transition() .duration(15000) .ease("linear") .tween("rotate", function() { var r = d3.interpolate(projection.rotate(), [-180, 0]); return function(t) { projection.rotate(r(t)); c.clearRect(0, 0, width, height); c.drawImage(space, 0, 0); c.fillStyle = "#00006B", c.beginPath(), path(globe), c.fill(); c.fillStyle = "#29527A", c.beginPath(), path(land), c.fill(); c.strokeStyle = "#fff", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke(); projection.rotate([180, 0]); }; }) .transition().duration(30).ease("linear") .each("end", transition); })(); };

रोटेशन को बिंदु [180, 0] से बिंदु [-180, 0] तक घुमाव के रूप में लागू किया जाता है, जो संयोग करता है। इस प्रकार, "इंटरपोलर", कैच को सूचित किए बिना, वह करेगा जो हमें चाहिए। फिर हम कैनवास पर पेंटिंग करना शुरू करते हैं, पहले इसे साफ करते हैं। हम देशों की पृष्ठभूमि, क्षेत्र, महाद्वीप और सीमाएं खींचते हैं। transition फ़ंक्शन के पुनरावर्ती कॉल के कारण हमें अनंत रोटेशन मिलता है।

"और फिर भी वह घूमती है!"

खैर, हमने एनीमेशन बनाया। GitHub पर स्रोत पाए जा सकते हैं, और आप bl.ocks.org सेवा के माध्यम से अंतरिक्ष दृश्यों का आनंद ले सकते हैं।

कैनवास के लाभों पर विचार करें:

एसवीजी की तुलना में तेज़ / चिकना प्रदर्शन
एनीमेशन, वीडियो, गेम और अन्य चीजों के साथ एकीकृत करने की क्षमता जो आज इसकी मदद से लागू की गई है

निष्कर्ष

इसलिए हमने अद्भुत d3.js लाइब्रेरी का उपयोग करके बनाए गए कुछ दिलचस्प उदाहरणों को देखा। मैंने उदाहरणों को समझने में आसान, दृश्य और काफी रोचक बनाने की कोशिश की। एसवीजी और कैनवस के बीच लड़ाई में, दोस्ती अंततः जीत गई, इसलिए एक विशेष तकनीक का उपयोग आपकी परियोजना के प्रकार पर निर्भर करता है। उदाहरण के लिए, यदि आपकी परियोजना कार्टोग्राफी से संबंधित है, तो एसवीजी का उपयोग करने की सलाह दी जाती है, यदि आप मल्टीमीडिया के साथ काम करते हैं, तो कैनवास आपकी मदद करेगा। मुझे आशा है कि आप रुचि रखते थे। D3.js के आगे के विकास में अच्छी किस्मत और सफलता!