Leaflet.js(~version 0.7.*)의 지도에 d3.js에서 svg 요소 보기

이 페이지에 기재된 샘플 코드를 예로서 참고로 합니다. Leaflet.js의 버전이 0.7.* 이하인 경우 유효한 쓰기 방법입니다.
h tp // w w. d3의 b. rg/2014/03/ぇあ fぇtー마 p우우 thd3jsー에에멘 tsーーーーー. HTML

라이브러리 파일을 로드합니다.

<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="//cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>

지도를 그립니다(예: OpenStreetMap).

var map = L.map('map').setView([35.689488, 139.691706], 4);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

L.tileLayer(
    'http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18,
}).addTo(map);

map._initPathRoot();

지도가 표시되었습니다.

Chrome에서 Developer Tools를 시작하면 Leaflet.js가 생성 한 div에 svg가 생성됩니다.



여기에 d3.js를 사용하여 svg 요소를 추가합니다. 우선은 편리하므로 그룹 요소를 생성합니다.

var g = d3.select("#map").select("svg").append("g");

svg에 그룹이 생성되었습니다.
데이터를 기반으로 circle을 생성하면,

var feature = g.selectAll("circle")
    .data(collection.objects)
    .enter().append("circle")
    .style("stroke", "black")  
    .style("opacity", .4) 
    .style("fill", "red")
    .attr("r", 4);  

그룹 안에 cicle가 생성되었습니다.



그리고는 viewreset시에, 생성한 그룹의 정렬을 하도록(듯이) latLngToLayerPoint를 사용한 설정을 해 둡니다.
ぇ tp // // ぇ ぇ tjs. 코 m/레후오렌세. html # 마 p ゔ ぃ

map.on("viewreset", update);
update();

function update() {
  feature.attr("transform", 
  function(d) { 
    return "translate("+ 
      map.latLngToLayerPoint(d.LatLng).x +","+ 
      map.latLngToLayerPoint(d.LatLng).y +")";
    }
  )
}