chiếu d3.js tỷ lệ

Question

Tôi đang cố vẽ bản đồ NYC bằng d3. Tôi đã tải xuống một loạt các shapefile từ http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml. Tôi đã chuyển đổi chúng thành geoJSON sử dụng http://converter.mygeodata.eu/, chẳng hạn chúng ở dạng WGS 84 (aka, tôi nghĩ, vĩ độ và kinh độ).

Tôi khá chắc chắn geoJSON là hợp lệ: Tôi có thể vẽ nó bằng cách sử dụng matplotlib và có vẻ như NYC, và các con số có vẻ nằm trong phạm vi hợp lệ. Đây là javascript của tôi:

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

Điều này, như được quảng cáo, chiếu Albers của NYC. Rắc rối là, tôi nghĩ rằng, quy mô của phép chiếu được chọn sao cho Mỹ phù hợp với một trang web đẹp, làm cho các đường dẫn cho NYC một chút squiggle ở ​​phía bên tay phải của màn hình.

Cách 'chính xác' (lemme cố gắng là người đầu tiên nói d3onic) để quy mô một số geo.path() sao cho khoảng cách của thang tỷ lệ/vĩ độ của tôi trên chiều rộng và chiều cao của SVG?

(ít từ chối trách nhiệm: xin lỗi nếu tôi đã bỏ lỡ một cái gì đó rõ ràng, đây là một dự án Tôi đang cố gắng để hoàn thành ở hai đầu cực đoan trong ngày)

Answer 1

Trước tiên, bạn sẽ muốn tạo một chiếu và gán nó cho d3.geo.path, để bạn có thể tùy chỉnh cài đặt chiếu.

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

Việc dự báo mặc định là d3.geo.albersUsa, mà thực sự là một chiếu composite (với bốn lĩnh vực không liên tục khác nhau) được thiết kế cho thấy 48 tiểu bang, Alaska, Hawaii và Puerto Rico. Ah, dân tộc học. ;)

Sử dụng albers example trong kho git để xác định cài đặt trình chiếu chính xác tương tác. Các cài đặt bạn cần phải thiết lập là:

• nguồn gốc nên vĩ độ và kinh độ của NYC (có lẽ 73,98 °, 40,71 °)
• các dịch nên là trung tâm của khu vực hiển thị của bạn (như vậy, nếu bạn đang ở vẽ một cái gì đó 960 × 500, bạn có thể sử dụng 480.250 mặc định; đây sẽ là vị trí pixel của nguồn gốc)
• quy mô là một số chỉ định mức độ phóng to; vì bạn đang vẽ bản đồ tỷ lệ thành phố, có thể bạn muốn một giá trị giống như 10000

Cuối cùng, bạn sẽ cần chọn một số điểm tương đồng. Bạn có thể sử dụng các giá trị mặc định được cung cấp bởi d3.geo.albers(), nhưng có thể có các giá trị phù hợp hơn cho NYC. Có thể kiểm tra với USGS, bởi vì họ thường xuất bản song song tiêu chuẩn cho các khu vực bản đồ khác nhau.