Ошибка d3 при прослушивании события щелчка в Leaflet - PullRequest
Новая
       22

Ошибка d3 при прослушивании события щелчка в Leaflet

0 голосов
/ 10 октября 2018

То, что должно быть довольно простым делом, вызывает у меня некоторые проблемы в Leaflet.У меня есть d3 точки, наложенные на карту Leaflet: 

// create map element in DOM
<div id="map" class="sf" style="width: 600px; height: 400px"></div>

// build leaflet map
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjaXFheXZ6ejkwMzdyZmxtNmUzcWFlbnNjIn0.IoKwNIJXoLuMHPuUXsXeug';
        var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}';
        //var accessToken = 'pk.eyJ1Ijoic3RhcnJtb3NzMSIsImEiOiJjam13ZHlxbXgwdncwM3FvMnJjeGVubjI5In0.-ridMV6bkkyNhbPfMJhVzw';
        var map = L.map('map').setView([37.7701177, -122.40], 13);
            mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
         L.tileLayer(
'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
    tileSize: 512,
    zoomOffset: -1,
    attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);


     var svgLayer = L.svg();
        svgLayer.addTo(map);

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

    //load point data
    d3.json("data/SanFrancisco_CoWorkingTenants.json", function(SFData) {
        var SFData = SFCoworking.features
        console.log(SFData)
        })
    SFData.forEach(function(d) {
        d.latLong = new L.LatLng(d.properties.Latitude,
                                d.properties.Longitude);

    })

    // append circles to map
    var feature = g.selectAll("circle")
        .data(SFData)
        .enter().append("circle")
        .style("stroke", "black")
        .style("opacity", .4)
        .style("fill", "red")
        .attr("r", 20)
        .attr("class", 'features')


    function drawAndUpdateCircles() {
        feature.attr("transform",
            function(d) {
                var layerPoint = map.latLngToLayerPoint(d.latLong);

                return "translate("+ layerPoint.x +","+ layerPoint.y +")";

            }
        )
    }

    drawAndUpdateCircles();
    map.on("moveend", drawAndUpdateCircles);

Я хочу иметь всплывающие окна для каждой точки окружности, используя приемник событий наведения мыши.Но я даже не могу зайти так далеко.Я даже не могу заставить прослушиватель событий ниже срабатывать.Может кто-нибудь сказать мне, что здесь не так? 

d3.selectAll('.features').on("mouseover", function(){console.log("mouse event")})

При тестировании селектора d3 он работает со следующим: 

d3.selectAll('.features').style("opacity", .1)

Так что я знаю, что селектор здесь не проблема.Заранее спасибо!

...