Javascript 将d3矢量附加到传单图时出现问题

我想在传单地图上画点

我用html创建Map元素，构建传单地图，读入数据

这就是我被绊倒的地方。我想在地图上显示点-我已经成功地在d3地图上显示了这些点，但我想在上面的传单地图上重新显示它们。正如我在d3+传单示例中所看到的那样，我认为我应该使用我以前成功使用的路径生成器函数来向传单添加点，而不是提取横向/纵向

此处的代码顺序：

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

     function ready(error) {

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

  // Read in the json data          
 d3.json("data/SanFrancisco_CoWorkingTenants.json", 
 function(SFData) {
     var SFData = SFCoworking.features
     console.log(SFData) // this prints successfully
    })


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

   // Define d3 projection
   var albersProjectionBay = d3.geoAlbers()
        .scale( 282000)
        .rotate ( [122.4077441,] )
        .center( [0, 37.7701177] )

    // Define d3 path
    var geoPathBayArea = d3.geoPath()
        .projection( albersProjectionBay );


   var SFData = SFCoworking.features
       console.log(SFData)

    // draw points on map with d3 path generator 
    var feature = mapG.selectAll("path")
            .data(SFCoworking.features)
            .enter().append("path")
            .style("stroke", "black")  
            .style("opacity", .6) 
            .style("fill", "red")
            .attr("r", 20)
            .attr( "d", geoPathBayArea )
            console.log(feature) // nothing prints!

        }

功能就绪（错误）{
//制作单张地图
L.mapbox.accessToken=
‘pk.eyj1ijoic3rhcnjtb3nzmsimeioijjaxfhexz6ejkwmzdyzmmxtnmmuzcwflbnjin0.iokwnijxolumhpuuxxeug’；
var mapboxUrl=https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}？访问令牌={accessToken}'；
//var accessToken='pk.eyj1ijoic3rhcnjtb3nzmsimeioijjam13zhlxbxgwdncwm3fvmnjjegvubji5in0.-ridmv6bkynhbfjhvzw'；
var map=L.map（'map'）.setView（[37.7701177，-122.40]，13）；
地图链接=
'';
蒂莱耶(
'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z} /{x}/{y}？access_令牌='+L.mapbox.accessToken{
tileSize:512，
Zoomofset:-1，
属性：“）”
}).addTo（地图）；
//读入json数据
d3.json（“data/SanFrancisco_CoWorkingTenants.json”，
功能（SFData）{
var SFData=sfcowworking.features
console.log（SFData）//打印成功
})
var mapSVG=d3.选择（“映射”）.选择（“svg”）
mapG=mapSVG.append（“g”）；
//定义d3投影
var albersProjectionBay=d3.geoAlbers（）
.比例（282000）
.旋转（[122.4077441，]）
.中心（[0,37.7701177]）
//定义d3路径
var geoPathBayArea=d3.geoPath（）
.投影（阿尔伯斯投影湾）；
var SFData=sfcowworking.features
console.log（SFData）
//使用d3路径生成器在地图上绘制点
var feature=mapG.selectAll（“路径”）
.数据（sfcowworking.features）
.enter（）.append（“路径”）
.style（“笔划”、“黑色”）
.style（“不透明度”，.6）
.样式（“填充”、“红色”）
.attr（“r”，20）
.attr（“d”，地质公园区）
console.log（功能）//不打印任何内容！
}

---

当SFdata显示在控制台中时，这些特性在打印到控制台时只显示为一个空数组。这让我相信在如何将svg元素添加到地图中可能会有问题？

谢谢大家-这似乎很有效

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

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

        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);
            //console.log(d.LatLng)
        })
        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')

---

您是否在json加载回调中有您的最后一个代码段，您在第三个代码段中执行

console.log（SFData）

-我不确定是否理解您的问题？您显示的是代码段，但不是它们如何相互连接，或者如果它们是子代码段，如果它们只是顺序的，您将永远不会在映射上看到某些内容（异步加载）里约-谢谢。我已经编辑了上面的问题，希望代码序列更清晰。这是基本的代码以及它是如何一起工作的