Question

应该是一件相当简单的事情，在Leaflet中给我带来一些麻烦。我在传单地图上叠加了d3个点：

// 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);

我想使用mouseover事件侦听器为每个圆点弹出窗口。但我什至不能走那么远。我什至无法让下面的事件监听器触发。谁能告诉我这是怎么回事？

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

在测试d3选择器时，它可以与以下各项一起使用：

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

所以我知道选择器不是这里的问题。预先感谢！

单击事件侦听器中的d3在Leaflet中失败

0 个答案: