d3js v5 + topojson v3 以缩放为中心的正方形质心

Question

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

使用 scale extent = 1（无缩放），正方形的位置是正确的。

但是，如果 scale extent > 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", ...) 期间，您修改了 rects 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", ...)。

d3js v5 + topojson v3 以缩放为中心的正方形质心

d3js v5 + topojson v3 Center a square centroid with zoom

javascript

d3.js

topojson