要使d3 SVG点在缩放时保持在传单地图上的正确位置,可以采取以下步骤:
以下是一个示例代码片段,演示了如何使用d3实现SVG点在缩放时保持在传单地图上的正确位置:
// 创建SVG容器
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// 创建缩放函数
var zoom = d3.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);
// 应用缩放函数于SVG容器
svg.call(zoom);
// 创建g元素
var g = svg.append("g");
// 创建投影函数
var projection = d3.geoMercator()
.scale(100)
.translate([width / 2, height / 2]);
// 创建点元素
var points = g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 5)
.attr("fill", "red");
// 更新点元素的位置
function updatePoints() {
points.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
});
}
// 缩放函数的回调
function zoomed() {
g.attr("transform", d3.event.transform);
updatePoints();
}
请注意,这只是一个示例代码片段,具体实现可能因数据结构和需求而有所不同。在实际应用中,您可能需要根据自己的情况进行适当的调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云