Javascript D3变焦'；s translateExtent未按预期工作

我正在尝试使用

d3 tile

和

d3 zoom

创建一个平铺贴图。我已将

zoom.extent

和

zoom.translateExtent

设置为

[[0,0]，[width，height]]

。但当我缩放时，地图会跳到左上角

下面是示例代码

const tile = d3.tile()
    .extent([[0, 0], [width, height]])
    .tileSize(512);

const zoom = d3.zoom()       
    .translateExtent([[0, 0], [width, height]]) //  issue in this line
    .extent([[0, 0], [width, height]])
    .scaleExtent([1 << 10, 1 << 15])
    .on("zoom", () => zoomed(d3.event.transform));

// applied zoom like this
svg
    .call(zoom)
    .call(zoom.transform, d3.zoomIdentity
    .translate(width / 2, height / 2)
    .scale(-initialScale)
    .translate(...projection(initialCenter))
    .scale(-1));

function zoomed(transform) {
    projection
        .scale(transform.k / (2 * Math.PI))
        .translate([transform.x, transform.y]);
}

const tile=d3.tile（）
.范围（[[0,0]，[width，height]]）
.tileSize（512）；
const zoom=d3.zoom（）
.translateExtent（[[0,0]，[width，height]]）//此行中的问题
.范围（[[0,0]，[width，height]]）
.scaleExtent（[1这里的关键挑战是理解您的约束条件。投影的原始比例是1/（2π）：世界被投影到一个空间，一个像素乘以一个像素（每像素2π或每像素360度）。这允许更容易地与d3 zoom集成，但肯定不是直观的

D3 zoom用于修改投影，其比例值为
1试图统一缩放、投影、地理、屏幕和瓷砖坐标足以让人发疯。几天后我会看一看——现在在路上，下周晚些时候回家，但单位的清晰度问题驱使我创建一个（这当然还没有完成，更多地展示了可能的情况——d3.tile现在更好了（早期版本有点麻烦），但单元在清晰度方面仍有一些有待改进）谢谢@AndrewReid的评论。在你的d3拖鞋中，你有一个方法
ZoomTranslateConstraint
，我已经把它传递给了d3 zoom。在我的情况下，你会做同样的工作吗？谢谢@Andrew Reid的详细回答。但是现在它仍然跳到了底部。你能在我的演示中应用这个答案吗？我没有看到，请看再一次，但要到星期四才能看到-我在接下来的两天里有24小时的驾驶时间…我直接从修改后的Obseeable中复制了代码，但会再次检查。@AbdulAlim，现在可以查看更多，但是，我没有看到任何问题：谢谢@Andrew Reid的回答。你发布了可观察的示例吗？我无法打开我的t、 我的坏：（以前从未在observable上发表过任何东西）
   // Call zoom, same as before:
   svg
      .call(zoom)
      .call(zoom.transform, d3.zoomIdentity
          .translate(width / 2, height / 2)
          .scale(-initialScale)
          .translate(...projection(initialCenter))
          .scale(-1));

  // Now we can work on setting the zoom translate extent:
  // Zooomed projected limits of screen in lat long:
  var top = projection.invert([0,0])[1];
  var left = projection.invert([0,0])[0];
  var bottom = projection.invert([width,height])[1];
  var right = projection.invert([width,height])[0];

  // original projection:
  var baseProjection = d3.geoMercator()
    .translate([0,0])
    .scale(1/Math.PI/2);

  // Projected limits of screen in projected unzoomed coordinates:
  var topLeft = baseProjection([left,top])
  var bottomRight = baseProjection([right,bottom])

  // Set the zoom translate extent:
  zoom.translateExtent([topLeft,bottomRight])