D3.js गलत तरीके से जियोजसन का चित्रण: घुमावदार क्रम की समस्या

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

समस्या की पहचान करना

एसवीजी पथों का निरीक्षण करने पर, यह स्पष्ट हो जाता है कि कुछ पथ सटीक रूप से बनाए गए हैं जबकि अन्य इच्छित स्थान को छोड़कर पूरे ग्रह को कवर करते हैं। ऐसा इसलिए है क्योंकि डेटा में दक्षिणावर्त और वामावर्त दोनों प्रकार की वाइंडिंग्स का संयोजन होता है, जिससे D3.js उल्टे बहुभुज को ग्रह पर मौजूद हर चीज के रूप में मानता है जो लक्ष्य क्षेत्र नहीं है।

समस्या का समाधान

इस समस्या को हल करने के लिए, निर्देशांकों को फिर से व्यवस्थित करना होगा। एक सुविधाजनक समाधान turf.js लाइब्रेरी का उपयोग करना है:

var फिक्स्ड = फीचर्स.मैप(फंक्शन(फीचर) { रिटर्न टर्फ.रिवाइंड(फीचर,{रिवर्स:ट्रू}); });

var fixed = features.map(function(feature) {
    return turf.rewind(feature,{reverse:true});
});

वाइंडिंग क्रम को ठीक करने के बाद, आगे समायोजन मानचित्र का स्वरूप बढ़ाने के लिए बनाया जा सकता है। प्रक्षेपण में फिटसाइज विधि जोड़कर, अधिक उपयुक्त दृश्य प्राप्त करने के लिए मानचित्र को स्केल किया जा सकता है और अनुवाद किया जा सकता है।