D3.js 将D3中的世界地图缩放到给定纬度和经度周围的特定级别

是否有任何方法，我可以集中到d3世界地图周围的一个特定的纬度和经度加载的文件

这是一个正在工作的plunker，我可以在其中放大d3世界地图。

下面的代码用于放大以进行单击

function clicked() {
            currScale2 = projection.scale();
            if(beforeClickValue == 0)
            beforeClickValue = 150;
            beforeClickValue = beforeClickValue + 100;
            projection.scale(beforeClickValue);
            g.selectAll("path").attr("d", path);
 }

如果我提供肯尼亚的特定位置，我需要放大肯尼亚附近或周围的区域，例如：

    Latitude    0.55378653650984688  
    Longitude   35.661578039749543

---

如果您的中心点由一个特征确定

如果点是要素质心，则可以使用该要素自动将地图居中：

有几种方法可以实现这一点，其中之一是将投影设置为以特征为中心：

projection.fitSize([width,height],geoJSONKenyaTurkana);

fitSize获取边界框（svg）的宽度和高度，并设置投影的比例和平移，以最大化该边界框内特征的大小。fitExtent将在利润方面提供更大的灵活性：

projection.fitExtent([[10,10],[width-10,height-10]],geoJSONKenyaTurkana);

这将提供10像素的边距：第一个坐标是边界框的左上角，而第二个坐标是右下角

在使用任何一种方法将投影设置为居中后，可以在放大投影时附加特征（但是，缩放约束将相对于此起点）。以下是采用这种方法（使用fitSize）的plunkr：

我已经将您的featureCollection用作功能，但您可以将其集中在功能集合中的单个功能上

---

或者，也可能更符合您的标题，您可以使用缩放标识设置d3.zoom的初始缩放因子，这将操纵svg而不是投影，并使用缩放功能：

var bounds = path.bounds(geoJSONKenyaTurkana), 
dx = bounds[1][0] - bounds[0][0], 
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];

svg.call(_zoom.transform, d3.zoomIdentity
  .scale(scale) 
  .translate(translate[0]/scale,translate[1]/scale)
);

这给了我们这样的东西：

---

如果要手动设置中心点

但是，如果要根据手动设定的点将地图设置为居中，可以通过与上面相同的方式完成此操作：修改投影或修改缩放：

要修改投影，可以使用.center（），它获取坐标并将地图居中于此点：

projection.center（[经度，纬度]）

当然，点没有面积，因此您必须自己设置比例因子，该值将取决于您想要显示的内容：

projection.center（[经度，纬度]）.scale（k）

值越大，放大范围越大

或者，要操作缩放功能，我们可以使用以下方法：

var x = projection([35.661578039749543,0.55])[0],
y = projection([35.661578039749543,0.55])[1],
scale = 20,  
translate = [width / 2 - scale * x, height / 2 - scale * y];

  svg.call(_zoom.transform, d3.zoomIdentity
  .scale(scale) 
  .translate(translate[0]/scale,translate[1]/scale)
  );

与将投影设置为特定点的中心一样，您需要手动设置比例值。这里我任意选择了20个
 您好，我想使用最后一个代码段，其中我们提供了纬度和经度值，但使用此代码段，我无法使用滚动缩小，笔划非常放大。我希望输出与第一个Plunk中的一样，代码与最后一个代码段类似。通过缩放svg元素，它们的笔划将缩放。您可以在每个缩放事件上更新它以保持稳定：width=idealWidth/svgScale。在我的上一个片段中，我可能超过了你的缩放限制，禁用了滚动，如果你在加载时缩小一点或者改变缩放范围，你应该能够修复这个问题