D3.js में गलत जियोJSON रेंडरिंग को कैसे ठीक करें

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

समस्या विश्लेषण

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

Solution

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

कोड उदाहरण

का उपयोग करना वाइंडिंग क्रम को ठीक करने के लिए turf.rewind() विधि:

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

अतिरिक्त विचार

वाइंडिंग ऑर्डर को सही करने से ब्लैक रेक्टेंगल समस्या का समाधान हो जाता है, लेकिन D3.js में एक और विचित्रता पर ध्यान देना उचित है। जियोजसन विनिर्देश के विपरीत, D3.js विपरीत वाइंडिंग क्रम (क्लॉकवाइज के लिए वामावर्त और इसके विपरीत) का उपयोग करता है। परिणामस्वरूप, उचित रेंडरिंग सुनिश्चित करने के लिए रिवाइंडिंग से पहले वाइंडिंग ऑर्डर को उलटना आवश्यक हो सकता है।

बेहतर विज़ुअलाइज़ेशन

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

// Fit the features to the screen
var projection = d3.geoMercator().fitSize([width, height], features);

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