[英]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.