leaflet - Map on D3.js points

[Gist] https://gist.github.com/Hirosaji/a68c85369c9756ca4884ab48d765ea39

<!DOCTYPE html>
<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    #mapid { height: 500px; }
  </style>
</head>
<body>
  <div id="mapid"></div>
	<script>
    //Leaflet初期設定
    var map = L.map('mapid').setView([36.32, 139.0], 12);
    var mapLink = '<a href="https://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>';

//Leafletに用意されたsvgを使う
    map._initPathRoot(); //ver0.8以降は、L.svg().addTo(map)を使う

//Tile Map Serviceの指定
    L.tileLayer(
        'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
      }).addTo(map);

// svg要素を選択
    var svg = d3.select("#mapid").select("svg");
    var g = svg.append("g");

d3.json("landprice.geojson", function(point){

//元データにLeafletのLatLngobjを追加
      point.features.forEach(function(d){
        d.LatLngObj = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]);
      });

//サークル要素を追加
      var circle = g.selectAll("circle")
        .data(point.features)
        .enter()
        .append("circle")
          .attr({
            "stroke": "black",
            "stroke-width": 2,
            "opacity": .7,
            "fill": "red",
            "r": 10
          });

map.on("viewreset", update);

update();

function update() {
        //サークル要素の位置をアップデート
        circle.attr("transform", function(d) {
          return "translate("+
          map.latLngToLayerPoint(d.LatLngObj).x +","+
          map.latLngToLayerPoint(d.LatLngObj).y +")";
        });
      }

});
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js

https://d3js.org/d3.v3.min.js