Question

我试图使用d3.js v4.5.0和topojson v2从位于https://d3js.org/us-10m.v1.json的topojson文件中绘制美国县。 d3中的默认项目是Albers（我认为）。

使用以下代码生成标准投影贴图：

var width = 1000,
    height = 600;

var svg = d3.select("#us-county-map").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geoPath();

d3.json("data/us_counties.json", function(error, us) {
  if (error) return console.error(error);

  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("d", path);
});

但是，将var path更改为：

时

var projection = d3.geoMercator()
    .scale(500)
    .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

它产生799个类型的错误：

Error: <path> attribute d: Expected number, "…61.126408983549,NaNL1559.4690422…"

和下图（是的，黑盒子）。

创建错误是什么，是否有适当的方法来应用投影？

Answer 1

每当您看到没有定义投影的地图时，都是因为数据已经投影：

var path = d3.geoPath();

这也可以表示为：

var path = d3.geoPath().projection(null);

D3投影以纬度和经度投影坐标，即三维地球上的点。您的投影数据已转换为二维曲面，无需投影。 D3的投影功能无法正确投影。

要使用d3投影，您需要确保使用WGS84作为空间参照系（或坐标参考系）。也就是说，您的数据是以纬度和经度来衡量的。

请注意，可以使用geoTransform操作已投影的数据，请参阅API reference和此块on reprojecting already projected data。

编辑：

由于此问题中的特定数据是在综合预测中进行预测（允许包含夏威夷和阿拉斯加），因此可能很难取消项目。找到县数据并将其转换为topojson可能更容易。

县界的一个来源是here。通过将shapefile的所有部分添加到mapshaper.org并导出为topojson，可以轻松转换这些shapefile。虽然它确实使用NAD83数据而不是WGS84数据，但差异应该相当小。但是，如果需要，可以使用控制台并键入proj wgs84在mapshaper中转换为WGS84。可以在此处找到此数据的演示：US Counties Bl.ock

将投影切换到d3.geoMercator（）会导致错误

1 个答案: