D3 DataMaps (또는 jvectormap) : 좌표 코드로 사용자 정의 객체를 배치하는 방법

Question

예를 들어 gps coords (lat, lng)에 의해 wold map에 사용자 정의 html 객체를 추가하려면 css 또는 any 다른 (? 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

당신은 X를 얻을 수, y를 투사 좌표 : 애니메이션

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

projection([long, lat]); 

당신이 D3 전환 example 또는 CSS를 사용할 수 중 하나. 내가 당신을 위해 블록을 만든

: http://bl.ocks.org/ckothari/32149f15261b9c5c7a56c40f7f6b353d

편집 죄송합니다, 단지 실현 귀하의 질문은 http://datamaps.github.io/ 사용에 대한했다. topojson을 사용할 수 있는지 알려주세요. 그렇지 않으면 대답을 삭제합니다. 컬러 국가에

EDIT-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'); 
    //... 
}) 

EDIT-3 체인화 전환 업데이트 예 : https://bl.ocks.org/ckothari/raw/32149f15261b9c5c7a56c40f7f6b353d/

또한 http://bl.ocks.org/mbostock/1125997를 참조하십시오.