Как добавить узловые точки в генераторе кривых

#javascript #css #html5 #svg #d3js

Вопрос инициирован отличным ответом на вопрос по созданию полукруглых надписей в SVG.  

Ниже авторский код генератора кривых: 
















Генератор позволяет добавлять текст и создавать разнообразные формы кривых с помощью
перетаскивания узловых точек.
В textarea динамически выводится формула path 
Есть возможность добавлять новые узловые точки  

Можно ли внести некоторые улучшения в функционал генератора?  


Добавить возможность выбора количества знаков после запятой в формуле path  
Изменить порядок добавления новых узловых точек,- в любое место кривой, а не только
в конец её.    



Добавляем точку, как бы в середину кривой 

  

Но новая точка добавилась в конец кривой 




Приложение не работает в Firefox на локальном ПК

    

Ответы

Ответ 1

Я сделялъ :)

Кликами точки можно добавлять, а даблкликами - удалять.



Тут есть несколько фокусов:


Определение ближайшей точки к мышке, которая лежит на линии, осуществляется за счет
того, что каждый раз когда  меняется - я строю диаграмму Вороного d3.voronoi()
для точек лежащих на получившемся пути с фиксированным шагом.




Такое разбиение можно увидеть если убрать вот этот стиль

path.voronoi {
  fill: transparent;
  stroke: none;
}


и вот в этой строчке поставить 20 а не 2

.data(voronoi.polygons(sample(path.node(), 2)))


Проверка попадания точки в ячейку диаграммы делает браузер за счет механизма mouseover.


Второй фокус - определение между какими опорными точками вставлять вновь добавляемую - 
решил кое как на коленке, вероятно над этой частью еще стоит подумать. Т.к. придуманные
мною костыли не работают для аппроксимаций линий, которые не проходят через опорные
точки d3.curveBasis например, по-этому другие типы линий пока что убраны из этой поделки. 


Сейчас для генерации кривой по опорным точкам используется алгоритм d3.curveCardinal.










    cardinal
    cardinal closed
    basis
    basis closed