缩放d3.js预测

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()我的lat/lon的范围缩放到我的SVG的宽度和高度？

(小小的免责声明:道歉,如果我错过了一些明显的东西,这是我想在一天的最末端完成的项目)

Answer 1

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

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

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

使用git存储库中的albers示例以交互方式确定正确的投影设置.您需要设置的设置是:

• 起源应该是纽约市的纬度和经度(也许是73.98°,40.71°)
• 翻译应该是你的显示区域的中心(所以,如果你正在绘制960×500的东西,你可以使用默认的480,250;这将是原点的像素位置)
• 比例是一个数字,指定放大多少; 因为你正在绘制一个城市规模的地图,你可能想要一个更像10000的值

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