我正在使用 topojson 和 D3 来创建 map 。在 map 上,我执行以下操作来绘制位置。但是,当您放大 map 时,我希望 .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());
}
关于javascript - D3 比例 SVG child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38296494/