[英]D3 Scale SVG children
我正在使用带有 D3 的 topojson 创建地图。 在地图上,我执行以下操作以绘制位置。 但是,当您放大地图时,我希望 .place 圆圈在缩放时变小。
对象
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());
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.