В настоящее время я работаю над визуализацией графика, и я использую 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)" )