我正在尝试在 map 背景上绘制 SVG 圆圈，但是当它们出现在元素中时(使用 Chrome 开发工具)它们没有显示在页面上。我在这里缺少什么，为什么它们被隐藏了？
我已经尝试更改 map 和圆的填充、不透明度，但我无法弄清楚为什么它没有呈现？
我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet and D3 map</title>
<link rel="stylesheet" href="../leaflet.css" />
<script type="text/javascript" src="../leaflet.js"></script>
<script type="text/javascript" src="../d3.js"></script>
<style type="text/css">
#map{
width: 700px;
height: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
//
// LOAD THE MAP FROM MAPBOX & LEAFLET
//
var map = L.map("map").setView([50.0755,14.4378], 12);
mapLink = '<a href="http://www.mapbox.com">Mapbox</a>';
L.tileLayer (
"link to mapbox",{
attribution:"© " + mapLink + " Contributors",
maxZoom:20,
}).addTo(map);
//
// Create the SVG layer on top of the map
//
L.svg().addTo(map);
// Create the standard variables selecting the SVG in the map element
var svg = d3.select("#map").append("svg");
var g = svg.append("g");
//Load the coordinate for the circle
var objects = [ {"circle":{"coordinates":[50.0755,14.4378]}}];
//Loop through to create a LatLng element that can be projected onto Leaflet map
for(var i = 0;i<objects.length;i++){
objects[i].LatLng = new L.LatLng(objects[i].circle.coordinates[0], objects[i].circle.coordinates[1])
};
//Create the circle object and store it in features
var feature = g.selectAll("circle")
.data(objects)
.enter()
.append("circle")
.style("fill", "red")
.attr("r", 20);
//Make the circle dynamic, by calling the update function whenever view is view is reset
map.on("viewreset", update)
//Call the update also on first load of the web page
update();
//Updates the position of the circle every time the map is updated
function update(){
feature.attr("transform",
function(d){
return "translate("+
map.latLngToLayerPoint(d.LatLng).x+","+
map.latLngToLayerPoint(d.LatLng).y+")";
})
};
</script>
</body>
</html>
最佳答案
如您所见，您的圈子已附加:
但是，它不可见不是因为不透明度或颜色，而是因为您没有设置 svg 的尺寸。使用 svg 的默认尺寸，您的圆圈超出其边界并因此隐藏(它位于 map 的中间，在 [350,300]，而 svg 的默认尺寸为 300x150 可能取决于浏览器 ).尝试:
var svg = d3.select("#map")
.append("svg")
.attr("width",700)
.attr("height",600)
因为您的 map 宽 700 像素，高 600 像素。
关于javascript - D3 和 Leaflet - svg 圆圈不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48033895/