在d3 v4中居中和旋转投影

Question

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

我正在使用Albers .rotate圆锥投影，并且尝试了.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中之前，我们先旋转地图。 作为一般的经验法则，在缩放和拟合地图之前，应先应用球面变换（稍后我将作更详细的解释）。

那应该使您处于良好的旋转和适应状态：