Круг Топойсона D3 с радиусом в милях

Почему бы не использовать встроенный генератор кругов d3.geoCircle()?

Возвращает новый объект геометрии GeoJSON типа «Многоугольник», аппроксимирующий круг на поверхности сферы, с текущим center, radius и precision. Любые аргументы передаются методам доступа.

Вам остается только вычислить радиус круга в градусах. Поскольку Земля не является идеальной сферой, это само по себе может стать серьезной проблемой. Но для многих приложений достаточно приближения. Принимая во внимание только средний радиус 3 958 миль, расчеты можно записать как:

var EARTH_RADIUS = 3959;                         // mean radius in miles
var radiusMi     = 5;                            // radius to be drawn in miles
var radiusDeg    = radiusMi / EARTH_RADIUS * 90; // radius in degrees for circle generator

Затем это можно передать генератору кругов:

var circle = d3.geoCircle().radius(radiusDeg);

Наконец, генератор круга используется для передачи его вывода через привязку данных к соответствующему генератору пути с учетом проекции:

svg.append("path")
  .datum(circle)
    .attr("d", path);

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

D3 v3

Если вы все еще придерживаетесь D3 v3, пример тоже подойдет. Однако вам необходимо соответствующим образом изменить имена:

• d3.geo.circle ↦ d3.geoCircle

Кроме того, были переименованы некоторые методы генератора кругов:

• circle. _6 _ ↦ circle. center()
• circle. _10 _ ↦ circle. radius()

Применяя эти настройки к моему вышеупомянутому связанному блоку, это также работает для v3: v3 Block.

Этот подход раскрывает свои сильные стороны, когда речь идет о необычных проекциях с серьезными искажениями. Это становится легко заметным, просто изменив проекцию в блоке на d3.geoGnomonic(). На следующем снимке экрана из обновленного блока все еще показаны те же круги, что и выше, с радиусом 50 миль. каждый: