Помещение стрелки (маркера) в определенную точку на пути при использовании библиотеки d3 javascript

В настоящее время я работаю над визуализацией графика, и я использую SVG и D3-библиотеку. Меня спросил наш дизайнер, могу ли я поставить наконечники стрел из граней графика в положение, соответствующее 80% длины линий. Мне удалось достичь первой части - получить позицию - с помощью метода getPointAtLength.

var svg = d3.select("body").append("svg")
   .attr("width", 960)
   .attr("height", 500)

var path = svg.append("path")
   .attr("d", "M20,20C400,20,20,400,400,400")
   .attr("fill", "none")
   .attr("stroke", "black");

var pathEl = path.node();

var pathLength = pathEl.getTotalLength();

var pathPoint = pathEl.getPointAtLength(pathLength*0.5);

var point = svg.append("svg:circle")
   .style("fill", "red")
   .attr("r", 5)
   .attr("cx", pathPoint.x)
   .attr("cy", pathPoint.y);

Вот пример jsfidle

Теперь мне интересно, как я прикрепляю стрелку к этой позиции с соответствующей ориентацией. Более важно, как это сделать, чтобы я мог обновлять края графика при перемещении связанных узлов. Я еще не смог найти ответа, примеры на "маркерах" работают с такими свойствами пути, как: style ('marker-end', "url (# end-arrow)" )

Ответ 1