Javascript d3js v5+；使用缩放使正方形质心居中

我试图在地理实体的中心放置一个正方形。 我添加了橙色圆圈来标记质心的位置

当缩放范围=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");

---

这是我的代码：

问题是您希望保持矩形大小与当前比例无关。因此，在

.on（“zoom”，…）

期间，您可以修改矩形

宽度

和

高度

：

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（“缩放”，…）

中即可！感谢您的澄清：）