将 d3 向量附加到传单地图时出现问题

Question

我正在尝试在传单地图上叠加点。

我在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!
}

当 SFdata 显示在控制台中时，功能在打印到控制台时仅显示为空数组。 这让我相信如何将 svg 元素附加到地图可能存在问题？

Answer 1

谢谢大家 - 这似乎有效。

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')