缩放d3.js投影

Question

我正在尝试使用D3绘制NYC的地图。我从 http://www.nyc。 gov / html / dcp / html / bytes / dwndistricts.shtml http://converter.mygeodata.eu/ ，使它们转换为Geojson。它们在WGS 84（AKA，我认为，纬度和经度）。

我很确定地质json有效：我可以使用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")

.

这个绘图，如识，纽约的Albers投影。我认为麻烦，选择投影的比例，使我们适合一个很好的网页，使NYC的路径在屏幕的右手侧有一点抽穗。

'正确'方式（LEMME尝试是第一个说D3onic）以扩展一个生成的缩放，使得我的LAT / LON刻度的范围在我的SVG的宽度和高度上？

（小免责声明：道歉如果我错过了一些显而易见的事情，这是为了一个项目，我正在尝试在当天的极端结束时完成）

Answer 1

First, you'll want to create a projection, and assign that to the d3.geo.path, so that you can customize the projection settings.

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

The default projection is d3.geo.albersUsa, which is actually a composite projection (with four different discontinuous areas) designed for showing the 48 states, Alaska, Hawaii and Puerto Rico. Ah, ethnocentrism. ;)

Use the albers example in the git repository to determine the correct projection settings interactively. The settings you need to set are:

• the origin should be NYC's latitude and longitude (perhaps 73.98°, 40.71°)
• the translate should be the center of your display area (so, if you're drawing something 960×500, you can use the default 480,250; this will be the pixel location of the origin)
• the scale is some number that specifies how much to zoom-in; since you're drawing a city-scale map, you probably want a value more like 10000

Lastly, you'll need to pick some parallels. You can use the defaults provided by d3.geo.albers(), but there might be more suitable ones for NYC. Possibly check with the USGS, because they often publish standard parallels for different map areas.