Javascript D3儿童量表
我正在使用topojson和D3创建一个地图。在地图上,我做了以下步骤来绘制位置。但是,当你放大地图时,我希望。放置圆在缩放时变小 对象Javascript D3儿童量表,javascript,d3.js,svg,Javascript,D3.js,Svg,我正在使用topojson和D3创建一个地图。在地图上,我做了以下步骤来绘制位置。但是,当你放大地图时,我希望。放置圆在缩放时变小 对象 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .attr("id", "map"); var g = svg.append("g") .call(zoom); var map = g.append
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id", "map");
var g = svg.append("g")
.call(zoom);
var map = g.append("g")
.attr("transform", "translate(0,0) scale(1)");
缩放
s = 4000;
zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([s, s * 4])
.on("zoom", zoommove);
绘制位置:
topGroup = map.append('g').attr('id', 'mapGroup');
topGroup.selectAll(".place")
.data(topojson.feature(mapData, transformedPlotData).features)
.enter()
.append("circle")
.attr('cx', function(d) { return path.centroid(d)[0] })
.attr('cy', function(d) { return path.centroid(d)[1] })
.attr("r", 4);
缩放
function zoommove() {
var t1 = projection.translate(),
t2 = d3.event.translate,
t = [t2[0]-t1[0], t2[1]-t1[1]];
map.attr("transform",
"translate("+t+") " +
"scale("+(d3.event.scale/s)+")"
);
}
感谢您的缩放功能,请根据缩放比例设置圆的大小:
.attr("r", 4/zoom.scale());
大概是这样的:
function zoommove() {
var t1 = projection.translate(),
t2 = d3.event.translate,
t = [t2[0]-t1[0], t2[1]-t1[1]];
map.attr("transform",
"translate("+t+") " +
"scale("+(d3.event.scale/s)+")"
);
topGroup.selectAll("circle")
.attr("r", 4/zoom.scale());
}
您能在JSFIDLE或其他类似的存储库上发布一个工作示例吗?你把圆圈变小是什么意思?你的意思是在放大时保持恒定的大小吗?上面的缩放算法是否真的按照您预期的方式工作?到底发生了什么?请花些时间详细描述您的问题。