我想通过 d3 覆盖带有圆圈的传单 map 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:600px; height:600px;">
<script>
var map = new L.Map("map", {
center: [37.8, -96.9],
zoom: 4
})
.addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
svgCircles = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("https://jsonblob.com/api/580256bbe4b0bcac9f7ffa43", function(error, myPoints) {
if (error) throw error;
myPoints.features.forEach(function(d) {
d.LatLng = new L.LatLng(d.geometry.coordinates[1],
d.geometry.coordinates[0]);
});
var circles = svgCircles.selectAll("circle")
.data(myPoints.features)
.enter()
.append("circle")
.attr("r", 100)
.style("fill", "red")
.attr("fill-opacity", 0.5);
function update() {
circles.attr("cx", function(d) {
return map.latLngToLayerPoint(d.LatLng).x;
});
circles.attr("cy", function(d) {
return map.latLngToLayerPoint(d.LatLng).y;
});
}
map.on("viewreset", update);
update();
})
</script>
</body>
</html>
圆圈已添加到DOM，但不会显示在传单上。我想这是因为他们的位置错误。
这就是它的样子:
我该如何正确定位它们？注意:我不想使用 map._initPathRoot(); 来获取由 leaflet 创建的 svg-element。
最佳答案
首先，您在这些圆圈上的半径太大。您的 JSON 文件中有数千个点，每个点的半径为 100 像素，而您的 map 只有 600x600px。
其次，您似乎正在尝试关注 this tutorial ，但你遗漏了一个关键部分。 Bostock 先生讲述了如何计算特征的边界框以将 SVG 放置在正确的位置。您已忽略此部分，因此您的 SVG 将被放置在 0,0 处并具有默认大小。
按照他的教程处理您的数据会生成以下代码。 注意，我将您的 JSON 数据限制为东北部的几个城市。我不想找到某个地方来托管 6mb 的 JSON(您可能需要考虑将该文件削减到仅美国城市)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id="map" style="width:600px; height:600px;"></div>
<script>
var map = new L.Map("map", {
center: [37.8, -96.9],
zoom: 4
})
.addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
var svg = d3.select(map.getPanes().overlayPane).append("svg"),
svgCircles = svg.append("g").attr("class", "leaflet-zoom-hide");
d3.json("https://jsonblob.com/api/580256bbe4b0bcac9f7ffa43", function(error, myPoints) {
if (error) throw error;
var transform = d3.geo.transform({
point: projectPoint
}),
path = d3.geo.path().projection(transform);
var bounds = path.bounds(myPoints),
topLeft = bounds[0],
bottomRight = bounds[1];
myPoints.features.forEach(function(d) {
d.LatLng = new L.LatLng(d.geometry.coordinates[1],
d.geometry.coordinates[0]);
});
var circles = svgCircles.selectAll("circle")
.data(myPoints.features)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", "red")
.attr("fill-opacity", 0.5);
// Use Leaflet to implement a D3 geometric transformation.
function projectPoint(x, y) {
var point = map.latLngToLayerPoint(new L.LatLng(y, x));
this.stream.point(point.x, point.y);
}
function update() {
circles.attr("cx", function(d) {
return map.latLngToLayerPoint(d.LatLng).x;
});
circles.attr("cy", function(d) {
return map.latLngToLayerPoint(d.LatLng).y;
});
svg.attr("width", bottomRight[0] - topLeft[0])
.attr("height", bottomRight[1] - topLeft[1])
.style("left", topLeft[0] + "px")
.style("top", topLeft[1] + "px");
svgCircles.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");
}
map.on("viewreset", update);
update();
})
</script>
</body>
</html>回复评论
由于我将数据限制为较小的城市子集(纽约州和宾夕法尼亚州的城市)，因此仅根据数据中的内容计算范围。 Here it is with all the cities in your JSON (稍等一下加载)。
以及包含所有数据的快速屏幕截图:
关于javascript - 在传单上用 d3 覆盖圆圈会导致位置不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40047326/