缩放 d3.js 投影

Question

我正在尝试使用 d3 绘制纽约市地图。我从http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml 下载了一堆 shapefile。我已经使用http://converter.mygeodata.eu/ 将它们转换为geoJSON，这样它们就在WGS 84 中（我认为，也就是纬度和经度）。

我很确定 geoJSON 是有效的：我可以使用 matplotlib 绘制它，它看起来像 NYC，并且数字似乎在有效范围内。这是我的javascript：

var path = d3.geo.path()
d3.select("body")
  .append("svg")
    .attr("height", 1000)
    .attr("width", 1000)
  .append("g")
  .selectAll("path")
  .data(data.features)
  .enter()
  .append("path")
    .attr("d", path)
    .style("stroke","black")
    .style("stroke-width","1px")

正如所宣传的那样，这绘制了纽约市的阿尔伯斯投影。问题是，我认为，投影比例的选择是为了让美国适合一个漂亮的网页，使纽约市的路径在屏幕右侧有点弯曲。

缩放geo.path() 以使我的纬度/经度范围扩展到我的 SVG 的宽度和高度的“正确”方式是什么（我试图声称自己是第一个说 d3onic）？

（小小的免责声明：如果我遗漏了一些明显的东西，我深表歉意，这是针对我试图在一天结束时完成的项目）

Answer 1

首先，您需要创建一个投影，并将其分配给 d3.geo.path，以便您可以自定义投影设置。

var albers = d3.geo.albers(),
    path = d3.geo.path().projection(albers);

默认投影是 d3.geo.albersUsa，它实际上是一个复合投影（具有四个不同的不连续区域），用于显示 48 个州、阿拉斯加、夏威夷和波多黎各。啊，种族中心主义。 ;)

使用 git 存储库中的 albers example 以交互方式确定正确的投影设置。您需要设置的设置是：

• 原点应该是纽约市的经纬度（可能是 73.98°、40.71°）
• 平移应该是显示区域的中心（因此，如果您要绘制 960×500 的东西，您可以使用默认的 480,250；这将是原点的像素位置）
• 比例是指定放大多少的数字；由于您正在绘制城市比例地图，因此您可能想要一个更像 10000 的值

最后，您需要选择一些相似之处。您可以使用 d3.geo.albers() 提供的默认值，但可能有更适合 NYC 的默认值。可能与美国地质调查局核实，因为他们经常发布不同地图区域的标准平行线。