Jestem nowy w d3 - spróbuję wyjaśnić, jak to rozumiem, ale nie jestem pewien, czy wszystko jest w porządku.
Sekret tkwi w świadomości, że niektóre metody będą działać na przestrzeni kartograficznej (szerokość, długość), a inne na przestrzeni kartezjańskiej (x, y na ekranie). Przestrzeń kartograficzna (nasza planeta) jest (prawie) sferyczna, przestrzeń kartezjańska (ekran) jest płaska - do odwzorowania jednej na drugiej potrzebny jest algorytm, który nazywa się projekcją . Przestrzeń ta jest zbyt krótka, aby zagłębić się w fascynujący temat projekcji i tego, jak zniekształcają one cechy geograficzne, aby zmienić sferę w płaszczyznę; niektóre mają na celu zachowanie kątów, inne zachowanie odległości itd. - zawsze istnieje kompromis (Mike Bostock ma ogromny zbiór przykładów ).
W d3 rzutowany obiekt ma właściwość środkową / ustawiającą, podaną w jednostkach mapy:
projection.center ([lokalizacja])
Jeśli określono środek, ustawia środek odwzorowania na określone położenie, dwuelementową tablicę długości i szerokości geograficznej w stopniach i zwraca rzut. Jeśli środek nie jest określony, zwraca bieżące centrum, które domyślnie wynosi ⟨0 °, 0 °⟩.
Jest też tłumaczenie, podane w pikselach - gdzie środek projekcji stoi względem płótna:
projection.translate ([punkt])
Jeśli określono punkt, ustawia przesunięcie przesunięcia odwzorowania na określoną dwuelementową tablicę [x, y] i zwraca rzut. Jeśli nie określono punktu, zwraca bieżące przesunięcie tłumaczenia, które domyślnie wynosi [480, 250]. Przesunięcie przesunięcia określa współrzędne pikseli środka projekcji. Domyślne przesunięcie przesunięcia umieszcza ⟨0 °, 0 °⟩ w środku obszaru 960 × 500.
Kiedy chcę wyśrodkować obiekt na płótnie, lubię ustawić środek projekcji na środek obwiedni obiektu - to działa, gdy używam mercator (WGS 84, używany w Google Maps) dla mojego kraju (Brazylia), nigdy nie testowano przy użyciu innych wypustów i półkul. Być może będziesz musiał wprowadzić poprawki w innych sytuacjach, ale jeśli zastosujesz się do tych podstawowych zasad, wszystko będzie dobrze.
Na przykład, biorąc pod uwagę rzut i ścieżkę:
var projection = d3.geo.mercator()
.scale(1);
var path = d3.geo.path()
.projection(projection);
bounds
Metoda od path
zwrotów obwiedni w pikselach . Użyj go, aby znaleźć odpowiednią skalę, porównując rozmiar w pikselach z rozmiarem w jednostkach mapy (0,95 daje 5% margines nad najlepszym dopasowaniem szerokości lub wysokości). Tutaj podstawowa geometria, obliczająca szerokość / wysokość prostokąta dla przeciwległych narożników po przekątnej:
var b = path.bounds(feature),
s = 0.9 / Math.max(
(b[1][0] - b[0][0]) / width,
(b[1][1] - b[0][1]) / height
);
projection.scale(s);
Użyj d3.geo.bounds
metody, aby znaleźć obwiednię w jednostkach mapy:
b = d3.geo.bounds(feature);
Ustaw środek rzutowania na środek obwiedni:
projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);
Użyj tej translate
metody, aby przenieść środek mapy na środek obszaru roboczego:
projection.translate([width/2, height/2]);
Do tej pory powinieneś mieć powiększoną funkcję w środku mapy z 5% marginesem.