Общие сведения о преобразованиях D3 TopoJSON

Я пытаюсь понять преобразование D3 SVG для карты мира, которая позволяет увеличивать масштаб до выбранной страны.

Моя текущая реализация способна рисовать карту мира и масштабировать ее до любого полноэкранного разрешения. Более того, он может вычислить то же самое для конкретной страны или набора стран.

Например, моя реализация вычисляет следующую проекцию для отрисовки всей карты мира на экране 2560x1440:

d3.geo.mercator()
  .center(22.266249946553817,41.93985624315233)
  .scale(265.88042450605)
  .translate(1336.2192475286854,576.7978959424244)

И если, например, Германия должна быть отрисована по размеру экрана, реализация вычисляет следующую проекцию:

d3.geo.mercator()
  .center(10.36090255016238,51.05100408657832)
  .scale(5575.925124835363)
  .translate(1279.7901899016058,608.1878627921983)

Теперь я хочу анимировать преобразование между двумя представлениями, но я почему-то не понимаю атрибут svg «transform», который мне нужно прикрепить к группе путей.

Как я могу трансформироваться между двумя проекциями? Я думал, что могу просто сделать:

translate(1336.2192475286854,576.7978959424244)   //projection.translate() worldmap view
scale(5575.925124835363)                          //scale computed for Germany
translate(1279.7901899016058,608.1878627921983)   //offset computed for Germany

Но при проверке DOM-элемента "g" и его атрибута преобразования он содержит совершенно разные значения.

Что мне здесь не хватает?

Рад любому отзыву!

Лучший, Себастьян


svg d3.js transform projection topojson
person Sebastian B.    schedule 01.04.2014    source источник
comment
Если я правильно понимаю, что вы пытаетесь сделать, вам нужно интерполировать между двумя преобразованиями. См. здесь для объяснения и здесь пример с картой.   -  person Lars Kotthoff    schedule 01.04.2014
comment
Да, хитрость в том, чтобы вызвать g.selectAll(path).transition() с атрибутом path для перехода между двумя проекциями! Большое тебе спасибо!!   -  person Sebastian B.    schedule 01.04.2014
comment
... это, однако, вероятно, довольно неэффективно, тогда как преобразование должно быть менее требовательным к ресурсам.   -  person Sebastian B.    schedule 01.04.2014
comment
Отлично, что это решило вашу проблему. Я добавлю его как ответ для справки.   -  person Lars Kotthoff    schedule 01.04.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно перейти между двумя преобразованиями. Однако использование перехода по умолчанию дает неудовлетворительные результаты, поэтому вам нужна пользовательская интерполяция. Дополнительные пояснения см. в этом примере. Вот пример, который делает с картой именно то, что вам нужно.

person Lars Kotthoff    schedule 01.04.2014