拡大縮小D3.JS予測

Question

D3を使ってNYCの地図を描こうとしています。 http://www.nycから束をダウンロードしました。 gov / html / dcp / html / bytes / dwndistricts.shtml 。 を使用してGejsonに変換しました。 WGS 84（AKA、私は思い、緯度と経度）。

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")

.

このプロットは、宣伝されているように、NYCの仲間を投影します。トラブルは、米国が素敵なウェブページに収まるように投影の規模が選択され、ニューヨークの経路が画面の右側に小さな断の口を作るようになると思います。

「正しい」方法は何ですか（LemmeはD3ONSを最初に言うことを主張しようとします。

（免責事項：謝罪：私が明らかな何かを逃した場合、これは私が一日の極端な終わりに完了しようとしているプロジェクトのためのものです）

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.