डी 3 डेटामैप्स (या jvectormap): कॉर्ड

Question

द्वारा मानचित्र पर कस्टम ऑब्जेक्ट कैसे डालें उदाहरण के लिए मैं जीपीएस कॉर्ड (लैट, एलएनजी) द्वारा मानचित्र को बेल्ड करने के लिए एक कस्टम एचटीएमएल ऑब्जेक्ट जोड़ना चाहता हूं - जैसे कि सीएसएस या किसी के साथ पल्सिंग डॉट अन्य (? js) मार्कर एनीमेशन

<style> 

#circle { 
    background: red; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 

} 

.gps_ring { 
    border: 3px solid red; 
    -webkit-border-radius: 30px; 
    height: 18px; 
    width: 18px; 

    left:20px; 
    top:214px; 
    -webkit-animation: pulsate 1s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0 
} 
@-webkit-keyframes pulsate { 
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;} 
    50% {opacity: 1.0;} 
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;} 
} 
</style> 

<div id="state" class="grid_4 alpha"> 
    <div class="gps_ring"></div> 

</div> 

Answer 1

आप एक्स प्राप्त कर सकते हैं, वाई प्रक्षेपण से निर्देशांक:

var projection = d3.geo.mercator() 
      .center([0, 5 ]) 
      .scale(150); 

projection([long, lat]); 

एनीमेशन के लिए आप या तो या तो d3 संक्रमण example या सीएसएस इस्तेमाल कर सकते हैं।

मैं तुम्हारे लिए एक ब्लॉक बनाया है: http://bl.ocks.org/ckothari/32149f15261b9c5c7a56c40f7f6b353d

संपादित क्षमा करें, आपके प्रश्न को एहसास हुआ http://datamaps.github.io/ उपयोग के बारे में था। अगर आप topojson का उपयोग कर सकते हैं तो मुझे बताएं, अन्यथा मैं अपना जवाब हटा दूंगा।

संपादित -2 रंग देश के लिए :

d3.tsv('data.csv', function(data){ 
      g.selectAll('path') 
        .filter(function(d){ 
         return data.find(function(d1){ 
          return d1.iso == d.properties.iso_a2; 
         }) 
        }) 
        .attr('class', 'selected'); 
    //... 
}) 

संपादित -3 श्रृंखलन संक्रमण अपडेट किया गया उदाहरण: https://bl.ocks.org/ckothari/raw/32149f15261b9c5c7a56c40f7f6b353d/

इसके अलावा http://bl.ocks.org/mbostock/1125997 देखते हैं।