Dictionary d3.js。如何放大地图的选定区域？

我正在做一个在世界海洋地图上描绘不同数据的项目。您可以在上找到开发版本。若要在地图上描述数据，请选择变量，然后最好选择“类型统计平均值”，然后单击顶部栏上的“显示”按钮

要最初渲染贴图，我使用以下代码计算投影：

var scale = this.width / 640 * 100;
var offset = [this.width / 2, this.height / 2];
this.projection = d3.geo.equirectangular()
  .rotate([-180, 0])
  .scale(scale)
  .translate(offset)
var path = d3.geo.path().projection(this.projection);

然后使用以下代码重新计算地图投影：

它工作得很好，最后我得到了全屏/宽度图。但用户可以通过拖动和放大选定区域来选择地图的一部分。因此，当选择小面积地图时，其效果不是很好，但并不完美： 但当放大到大面积时，一切都会崩溃：

两个屏幕截图都显示了如何选择区域。单击选择左上角的缩放图标以查看结果

我用于计算新投影的代码如下所示：

/*
 * Coordinates of selection (rectangle area).
 */
var leftX      = state.leftX;
var topY       = state.topY;
var rightX     = state.rightX;
var bottomY    = state.bottomY;
/*
 * Calculate new map center.
 */
var areaWidth  = rightX - leftX;
var areaHeight = bottomY - topY;
var projectionCenter = state.inProjection.invert(
  [leftX + (areaWidth / 2), bottomY - (areaHeight / 2)]
);
/*
 * Calculate new scale factor.
 */
var widthAspectRatio  = areaWidth  / this.map.width;
var heightAspectRatio = areaHeight / this.map.height;

var widthScale  = state.inProjection.scale() / widthAspectRatio;
var heightScale = state.inProjection.scale() / heightAspectRatio;

var projectionScale;
if (widthScale < heightScale) {
  projectionScale = widthScale;
} else {
  projectionScale = heightScale;
}
/*
 * Update projection.
 */
state.outProjection = d3.geo.equirectangular()
  .rotate([0, 0, 0])
  .scale(projectionScale)
  .center(projectionCenter);

我不明白为什么它不正确？我认为旋转或定心有问题。。。或者可能是翻译。有人能告诉我如何正确缩放吗？

请看-您的例子中唯一的区别是，您从缩放中获得的是边界框的坐标，而不是对象。请看-您的例子中唯一的区别是，您从缩放中获得的是边界框的坐标，而不是对象。

/*
 * Coordinates of selection (rectangle area).
 */
var leftX      = state.leftX;
var topY       = state.topY;
var rightX     = state.rightX;
var bottomY    = state.bottomY;
/*
 * Calculate new map center.
 */
var areaWidth  = rightX - leftX;
var areaHeight = bottomY - topY;
var projectionCenter = state.inProjection.invert(
  [leftX + (areaWidth / 2), bottomY - (areaHeight / 2)]
);
/*
 * Calculate new scale factor.
 */
var widthAspectRatio  = areaWidth  / this.map.width;
var heightAspectRatio = areaHeight / this.map.height;

var widthScale  = state.inProjection.scale() / widthAspectRatio;
var heightScale = state.inProjection.scale() / heightAspectRatio;

var projectionScale;
if (widthScale < heightScale) {
  projectionScale = widthScale;
} else {
  projectionScale = heightScale;
}
/*
 * Update projection.
 */
state.outProjection = d3.geo.equirectangular()
  .rotate([0, 0, 0])
  .scale(projectionScale)
  .center(projectionCenter);