d3js v5 + topojson v3將方形質心居中縮放

Question

我嘗試在地理實體的中心放置一個正方形。 我添加了橙色圓圈以標記質心的位置。

比例范圍= 1 （無縮放）時，正方形的位置正確。

但是，如果比例范圍> 1 （使用縮放），則正方形的位置會平移。

我認為在定義正方形的位置時會發生問題。

let ctrSquare = g.attr("class","ctr_square")
    .selectAll(".ctr_square")
    .data(featureCollectionZe.features)
    .enter()
    .append("rect")
    .attr("x", (d)=>{return path.centroid(d)[0] - 7/2;})
    .attr("y", (d)=>{return path.centroid(d)[1] - 7/2;})
    .attr("width",7)
    .attr("height",7)
    .attr("fill","#0000ff")
    .attr("stroke","#0000ff");

這是我的代碼： https : //plnkr.co/edit/K0k9ACxFWgzsqzHmQHmM

Answer 1

問題是您要保持矩形大小與當前比例無關。 因此，在.on("zoom", ...)期間.on("zoom", ...)您可以修改矩形的width和height ：

ctrSquare
    .attr("width",7/d3.event.transform.k)
    .attr("height",7/d3.event.transform.k);

考慮到這一點，它們在x和y位置的正確代碼如下：

ctrSquare
    .attr("x",d => path.centroid(d)[0] - 7/d3.event.transform.k/2)
    .attr("y",d => path.centroid(d)[1] - 7/d3.event.transform.k/2)

因此，只需將這些行添加到.on("zoom", ...) 。