我正在尝试使用缩放功能来处理具有节点和状态文本的地图。我使用下面的链接进行缩放:
https://bl.ocks.org/mbostock/2206340
当我从链接应用逻辑时,地图正在使用节点和链接进行缩放,但状态的文本不会缩放,几秒钟后节点和链接也会停止缩放,只有地图放大和缩小。以下是我的示例代码,它基于D3 v4。
// projection definition
var projection = d3.geoAlbers()
.scale(width)
.translate([width / 2, height / 2]);
// path generator definition for major cities, including point radius
var path = d3.geoPath()
.projection(projection)
.pointRadius(2);
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([height, 8 * height])
.on("zoom", zoomed);
var svg = d3.select(this.domNode).append("svg")
.attr("width",width + margin.left + margin.right)
.attr("height",height + margin.top + margin.bottom)
/*.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform);
}))*/
//.attr("transform", "translate("+margin.left +"," +margin.top+")")
.on("click", function(d) {
if (event.target.classList.contains('nodes')) {
me.clearSelections();
me.endSelections();
return true;
} else {
return true;
}
})
;
var g = svg.append("g")
.call(zoom);
.....................
..................
.................
....................
function zoomed() {
projection.translate(d3.event.translate).scale(d3.event.scale);
g.selectAll("path").attr("d", path);
g.selectAll("circle").attr("d", node); //I tried this and below for testing but it didn't work
g.selectAll("line").attr("d", link);
}