leaflet@1.5.1 & d3@5.0.0 - ポイント表示

leaflet@1.5.1とd3@5.0.0を用いて、地図上にsvg circleを表示するサンプル

<!DOCTYPE html>
<html>

<head>
<title>Leafletv1.5.1 + D3v5 point</title>
<meta charset="utf-8" />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin="" />

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>

<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>
    <script> 
        //Leaflet初期設定
        var map = L.map('map').setView([36.3219088, 139.0032936], 12);
        var mapLink = '<a target="_blank" href="https://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>';

//Leafletにsvgレイヤーを追加
        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('#map').select('svg');

//ポイントデータを読み込む
        d3.json('landprice.geojson').then(function (point) {
            //元データにLeafletのLatLngobjを追加
            point.features.forEach(function (d) {
                d.LatLngObj = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]);
            });

//サークル要素を追加
            var circle = svg
                .selectAll('circle')
                .data(point.features)
                .enter()
                .append('circle')
                .attr('stroke', 'black')
                .attr('stroke-width', 2)
                .attr('fill', 'red')
                .attr('fill-opacity', 0.7)
                .attr('r', 10);

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

map.on('moveend', update);
            update();
        });
        
    </script>

</body>
</html>

https://unpkg.com/d3@5.0.0/dist/d3.min.js