在d3 v4中居中并旋转投影

Question

我正在尝试制作威斯康星州的静态互动地图。

我正在使用Albers Equal Area Conic投影，我尝试了.rotate，.center，.fitExtent，但每当我将这些添加到代码中时，地图就会完全消失。

任何人都知道会发生什么事吗？

以下是代码：

var margin = {top: 20, left: 20, bottom: 20, right: 20}
    height = 600- margin.top - margin.bottom,
    width = 960 - margin.left - margin.right;

var svg2 = d3.select("#map2").append("svg")
    .attr("height", height)
    .attr("width", width)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")");

d3.queue()
  .defer(d3.json, "WiscCountiesNoProjection.json")
  .await(ready);

var projection2 = d3.geoAlbers()
  .translate([width/3, height/1])
  .scale(4000)

var path2 = d3.geoPath()
  .projection(projection2)

function ready (error, data) {
  var counties = topojson.feature(data, data.objects.WiscCounties).features

  svg2.selectAll(".counties")
    .data(counties)
    .enter().append("path")
      .attr("class", "counties")
      .attr("d", path2)

}

这就是它的样子：

Answer 1

您不会详细了解如何调用不同的方法，但这里有一些关于如何使用它们的一般提示：

如果您没有应用任何其他转换，

fitExtent或简写版fitSize肯定会使您的对象出现在SVG上。最小的工作示例是：

const proj = d3.geoAlbers()
        .fitSize([width, height], wisconsin)

这应该会导致一个很好的装配，虽然没有正确旋转威斯康星州。如果没有，wisconsin不是有效的GeoJSON对象，即不是FeatureCollection，单Feature或几何对象。

接下来的问题是如何修复旋转。对于圆锥投影，据我所知，您通常希望找到感兴趣对象的中心并按经度的倒数旋转。一位非常友好的StackOverflow用户在此解释了详细信息：https://stackoverflow.com/a/41133970/4745643

在威斯康星州的情况下，该州的中心经度几乎正好是-90°，所以我们这样做：

const proj = d3.geoAlbers()
    .rotate([90, 0, 0])
    .fitSize([width, height], wisconsin)

请注意，我们在将对象放入SVG之前旋转地图。作为一般的经验法则，您应该在缩放和拟合地图之前应用球形变换（稍后我将跟进更详细的说明）。

这应该让你有一个很好的旋转和适合状态：