Я пытаюсь нарисовать траектории полета на карте, используя SVG. Я использую d3 поверх Leaflet, но используемые фреймворки не должны иметь никакого значения для моей проблемы - это триггер.

http://fiddle.jshell.net/zw8TR/26

Я пытаюсь это сделать, создавквадратичная кривая Безье (Я открыт для других / более простых способов, если вы знаете что-либо). Мне нужно вычислить 1 контрольную точку, перпендикулярную средней точке каждой линии. Эта точка должна всегда смещаться к более высокому значению y / широте, чем средняя точка, чтобы создать дугу, которая выглядит как траектория полета.

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

Проверьте мой предыдущий вопрос по этому вопросу - с диаграммами!

У меня есть ощущение, что проблема сводится к этой строке:

var theta = Math.atan2(t_area_y, t_area_x) * 180 / Math.PI;

Я не обрабатываю отрицательные координаты должным образом. Я пытался взломать неприятные ворота, чтобы справиться с этим.

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