ridimensionamento proiezioni d3.js

Question

Sto provando a disegnare una mappa di New York utilizzando d3. Ho scaricato un mucchio di shapefile da http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml. Li ho convertiti in geoJSON usando http://converter.mygeodata.eu/, in modo tale che siano in WGS 84 (ovvero, penso, latitudine e longitudine).

Sono abbastanza sicuro che il geoJSON sia valido: posso tracciarlo usando matplotlib e sembra NYC, ei numeri sembrano essere in un intervallo valido. Ecco il mio 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") 

Questa trama, come pubblicizzato, la proiezione di Albers di New York. Il problema è, penso, che la scala della proiezione è stata scelta in modo che gli Stati Uniti si adattino a una bella pagina Web, rendendo i percorsi per New York un po 'scarabocchi sul lato destro dello schermo.

Qual è il modo "corretto" (provare a pretendere di essere il primo a dire d3onic) per ridimensionare uno geo.path() tale che le estensioni della mia scala lat/lon sulla larghezza e altezza del mio SVG?

(poco disclaimer: scuse se ho perso qualcosa di ovvio, questo è per un progetto che sto cercando di completare agli estremi del giorno)

Answer 1

In primo luogo, ti consigliamo di creare una proiezione e assegnarlo a d3.geo.path, in modo da poter personalizzare le impostazioni di proiezione.

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

La proiezione predefinita è d3.geo.albersUsa, che è in realtà una proiezione composito (con quattro diverse aree discontinue) progettato per mostrare i 48 stati, Alaska, Hawaii e Portorico. Ah, etnocentrismo. ;)

Utilizzare lo albers example nel repository git per determinare le impostazioni di proiezione corrette in modo interattivo. Le impostazioni che è necessario impostare sono:

• l'origine dovrebbe essere la latitudine e la longitudine di New York (forse 73.98 °, 40.71 °)
• la traduzione dovrebbe essere il centro dell'area di visualizzazione (quindi, se siete disegnando qualcosa 960 × 500, è possibile utilizzare il 480.250 predefinito, questa sarà la posizione dei pixel dell'origine)
• la scala è un numero che specifica quanto zoomare; dal momento che stai disegnando una mappa in scala cittadina, probabilmente desideri un valore più simile a 10000

Infine, dovrai scegliere alcuni paralleli. È possibile utilizzare i valori predefiniti forniti da d3.geo.albers(), ma potrebbero esserci quelli più adatti per NYC. È possibile controllare con l'USGS, perché spesso pubblicano paralleli standard per diverse aree della mappa.