我比较熟悉JavaScript,D3以及JavaScript中的作用域如何工作,并且我在地图上缩放点时遇到问题(表示为不同大小的圆圈),以便在用户缩放时,点保持不变尺寸。为了实现这一点,我考虑将当前缩放比例传递给全局变量,然后将其除以圆的半径,但是很难将值从zoom.scale传递给全局变量。
缩放代码如下:
var zoom = d3.behavior.zoom()
.on("zoom",function(){
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
console.log(zoom.scale()); //this works
});
圈子代码如下:
d3.csv("cities.csv", function(error, data) {
//..other code
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", function(d) { return radius(d.pop)/zoomScale; }) //other code...
});
zoomScale 是从缩放传递的变量。如果有一种更简单的方法可以实现这一目标,我也会对此持开放态度,并提前感谢。