d3 js में नक्शा पुनः प्रक्षेपण के लिए सुचारु करने के लिए कैसे

Question

मैं बहुत इस उदाहरण की तरह, एल्बर के बीच सुचारु मैं निर्माण कर रहा हूँ एक मिनी अनुप्रयोग में/ओर्थोग्रफिक क्या करना चाहते हैं:

http://mbostock.github.io/d3/talk/20111018/#27

यह लगता है कि इस सुचारु नक्शा रास्तों में से एक नहीं बल्कि अस्थिर संक्रमण के साथ तथापि v3 में टूट गया है,:

https://www.evernote.com/shard/s236/sh/46b002bd-9c5b-4e9b-87ef-270c303eb677/2eaeebb267a3fc59df5a8447bbbcc58b/res/37917835-5aad-4509-b534-31a3e3034762/Worst_Tornado_Outbreaks_of_All_Time-20130611-074050.jpg.jpg?resizeSmall&width=832

कोड बहुत सीधे आगे है, मैं नक्शा एल्बर्स, तो ऑर्थो चलाने के रूप में प्रारंभ() इसे अद्यतन करने के लिए।

function ortho() { 
    var self = this, 
    h = 1000, 
    w = document.width; 

    this.projection = d3.geo.orthographic() 
    .scale(500) 
    .translate([ (w - 300)/2, h/2]) 
    .clipAngle(90) 
    .rotate([90, 0, 0]) 
    .precision(.1); 

    this.path = d3.geo.path() 
    .projection(this.projection); 

    //update path WITH transition 
    d3.selectAll('path') 
    .transition() 
    .duration(900) 
    .attr('d', app.path); 

} 

मानचित्र अलमारियों से ऑर्थोग्राफिक में बदलता है, लेकिन संक्रमण चिकनी नहीं है। कोई भी विचार महान होंगे।

Answer 1

यदि आप डी 3 के नाइव स्ट्रिंग इंटरपोलेटर (d3.interpolateString) का उपयोग करके पथ को इंटरपोलेट करते हैं, तो शुरुआती पथ में निर्देशांक की संख्या और अंतिम पथ में निर्देशांक की संख्या बिल्कुल उसी क्रम में मिलनी चाहिए। लेकिन clipping, cutting और resampling के कारण यह लगभग कभी मामला नहीं है। Shape interpolation संभव है (multiplestrategies का उपयोग करके), लेकिन सामान्य मामले में हल करने में यह एक कठिन समस्या है। this explanation (Path Transitions का हिस्सा) देखें क्योंकि भद्दा इंटरपोलेशन अपर्याप्त क्यों है।

पथ को इंटरपोल करने के बजाय, आप प्रक्षेपण को अलग करना चाहते हैं। प्रक्षेपण को इंटरपोल करने के लिए निर्देशांक के बीच सटीक पत्राचार की आवश्यकता नहीं होती है और इसलिए इंटरपोलेशन कलाकृतियों से बचा जाता है। एक प्रदर्शन के लिए इन उदाहरण देखें:

• http://bl.ocks.org/mbostock/5731632
• http://bl.ocks.org/mbostock/3711652
• http://www.jasondavies.com/maps/transition/

के रूप में पहले उदाहरण में दिखाया गया है, यहाँ एक कार्यान्वयन है आप का उपयोग कर सकते हैं:

function interpolatedProjection(a, b) { 
    var projection = d3.geo.projection(raw).scale(1), 
     center = projection.center, 
     translate = projection.translate, 
     α; 

    function raw(λ, φ) { 
    var pa = a([λ *= 180/Math.PI, φ *= 180/Math.PI]), pb = b([λ, φ]); 
    return [(1 - α) * pa[0] + α * pb[0], (α - 1) * pa[1] - α * pb[1]]; 
    } 

    projection.alpha = function(_) { 
    if (!arguments.length) return α; 
    α = +_; 
    var ca = a.center(), cb = b.center(), 
     ta = a.translate(), tb = b.translate(); 
    center([(1 - α) * ca[0] + α * cb[0], (1 - α) * ca[1] + α * cb[1]]); 
    translate([(1 - α) * ta[0] + α * tb[0], (1 - α) * ta[1] + α * tb[1]]); 
    return projection; 
    }; 

    delete projection.scale; 
    delete projection.translate; 
    delete projection.center; 
    return projection.alpha(0); 
} 

Tw का उपयोग करके इंटरपोलेटेड प्रोजेक्शन बनाएं o अनुमान a और b, और फिर इंटरपोलेटेड अल्फा को 0 (a के लिए) और 1 (b के लिए) के बीच मान पर सेट करें।