Question

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

我非常确定geoJSON是有效的：我可以使用matplotlib绘制它，它看起来像纽约，并且数字似乎在有效范围内。这是我的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")

正如所宣传的那样，这是纽约市Albers投影的情节。我认为麻烦的是选择投影的比例，以便美国适合一个漂亮的网页，使纽约的路径在屏幕的右侧稍微有些波动。

什么是'正确'的方式（lemme试图声称是第一个说d3onic）来缩放geo.path()，以便我的纬度/经度的范围缩放到我的SVG的宽度和高度？ / p>

（小小的免责声明：道歉，如果我错过了一些明显的东西，这是我正试图在当天极端完成的项目）

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。可能需要与USGS核实，因为他们经常发布不同地图区域的标准平行线。

缩放d3.js预测

1 个答案: