Fit D3 карта в SVG

Question

В этом jsfiddle у меня есть карта D3, которую я взял из здесь , но я пытаюсь вписать ее в svg, который в два раза меньше оригинального размера. Для этого я изменил:

var width = 480;
var height = 300;
.....
var path = d3.geoPath(d3.geoIdentity().translate([width/2, height/2]).scale(height*.5));

Но это не работает. Как сделать карту подходящей для SVG?

Answer 1

D3 geoIdentity раскрывает почти все стандартные методы проекции d3 (от макушки головы, только вращение невозможно, так как идентичность предполагает декартовы данные). Здесь самое главное, что он предоставляет методы fitSize и fitExtent. Эти методы устанавливают перевод и масштабирование на основе экстента координат отображаемых данных геоджона и экстента пикселя svg / canvas.

Для масштабирования ваших объектов с помощью геоидентификации вы можете использовать:

d3.geoIdentity().fitSize([width,height],geojsonObject)

Обратите внимание, что массив объектов геойсона не будет работать, но работает коллекция объектов геойсон или любой отдельный объект / объект геометрии. Ширина и высота svg / canvas.

Если вы хотите применить маржу, вы можете использовать:

d3.geoIdentity().fitExtent([[margin,margin],[width-margin,height-margin]],geojsonObject)

Поле не обязательно должно быть равномерным, формат [[left, top], [right, bottom]], geojsonObject

Если вы используете fitSize или fitExtent, вам не нужно устанавливать центр, переводить или масштабировать вручную, а их последующая установка приведет к повторному масштабированию или изменению масштаба карты.