डी 3 जेएस एसवीजी पथ उत्पन्न स्ट्रिंग

Question

मैं एसवीजी को थोड़ा सा अनुकूलित करने की कोशिश कर रहा हूं जो मैं अद्भुत डी 3 जेएस भौगोलिक मॉड्यूल का उपयोग कर उत्पन्न कर रहा हूं।

मैं एसवीजी पथ के लिए d विशेषता जनरेटर के रूप में d3.geo.path उपयोग कर रहा हूँ:

path = d3.geo.path().projection(config.projection); // projection is initialized somewhere else 

और फिर इसे का उपयोग कर इस तरह रास्तों रेंडर करने के लिए:

svg.selectAll(".country") 
    .data(countries) 
    .enter() 
    .insert("path", ".graticule") 
    .attr({ 
     class: "country", 
     d: path 
    }) 

और पथ की तरह तार मैं हो रही है इस तरह हैं:

M713.601085,459.8780053259876L714.7443994399441,460.08170562468473L715.0310281028103,460.5903728431771L715.0310281028103... 

जैसा देखा जा सकता है, कुछ संख्याएं बहुत अधिक दशमलव के साथ बहुत लंबी हैं और मेरे वर्तमान रिज़ॉल्यूशन में वास्तव में उपयोगी नहीं हैं, जो डीओएम को थोड़ी सी चीजें बनाती हैं और इन पथों को डीबग करने के लिए आलसी बनाती हैं (कई भी हैं, क्योंकि यह एक विश्व मानचित्र है जिसमें बहुत सारे देश खींचे जाते हैं)।

तो मेरा पहला दृष्टिकोण path के लिए इस pathSimplified आवरण बनाने गया था:

// Path simplified: take some decimals out of the 'd' string 
pathSimplified = function (d) { 
     return path(d).replace(/(\.\d{4})\d+/g, '$1'); 
    }; 

और फिर path के बजाय इसका उपयोग:

//... 
    .attr({ 
     class: "country", 
     d: pathSimplified 
    }) 

यही काम करता है और अब मैं प्रत्येक मान के लिए केवल 4 दशमलव मिल पथ स्ट्रिंग पर। इस तरह:

M713.6010,459.8780L714.7443,460.0817L715.0310,460.5903L715.0310... 

मेरा प्रश्न है: क्या यह बेहतर, कम हैकिश तरीके से किया जा सकता है? D3js के path फ़ंक्शन द्वारा थूकने के बाद स्ट्रिंग को ट्विक करने का अधिकार नहीं लगता है और पथ पर कुछ बिंदु पर राउंडिंग निर्दिष्ट करना अच्छा होगा या प्रक्षेपण ...

Answer 1

आपका विचार अच्छा है, सरलीकृत करना एक पॉलीलाइन मदद करता है, लेकिन आप निश्चित रूप से समन्वय को कम करने से बेहतर कर सकते हैं: पॉलीलाइन सेम्पलिफिकेशन के लिए एल्गोरिदम मौजूद हैं और आपको अच्छे परिणाम दे सकते हैं।

उदाहरण के लिए, Ramer-Douglas-Peucker algorithm पर एक नज़र डालें। यह Simplify.js जैसे पुस्तकालयों में लागू किया गया है (उस पृष्ठ पर डेमो देखें), जो आपको सहिष्णुता के साथ समायोजित करने की अनुमति देता है। आपको लाइन को एक्स/वाई कॉर्ड की सरणी के रूप में पास करना होगा, लेकिन मुझे विश्वास है कि ऐसा करना बहुत जटिल नहीं है।

मैंने यह भी देखा कि डी 3 भू अनुमान एक परिशुद्धता पैरामीटर (जैसे here) के लिए अनुमति देते हैं, हो सकता है कि आपने ऐसा कुछ अनदेखा किया हो? किसी भी मामले में, simplify.js के साथ अपने आप को समन्वय को सरल बनाना आमतौर पर हमेशा संभव होता है।