Помещение стрелки (маркера) в определенную точку на пути при использовании библиотеки 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

Во-первых, длинный ответ fooobar.com/info/164553/.... Быстрый ответ SVG <markers>

(базовый) короткий ответ: немного загляните в красную точку, измерьте наклон и нарисуйте линию между двумя точками. Теперь вопрос упрощен: как добавить стрелку в конец прямой линии? Используйте быстрый ответ.

Добавьте это в свой код, чтобы визуализировать ответ: -

var pathPoint2 = pathEl.getPointAtLength(pathLength*0.78);
var point2 = svg.append("svg:circle")
    .style("fill", "blue")
    .attr("r", 3)
    .attr("cx", pathPoint2.x)
    .attr("cy", pathPoint2.y);

var slope = (pathPoint.y - pathPoint2.y)/(pathPoint.x - pathPoint2.x);
var x0 = pathPoint2.x/2;
var y0 = slope*(x0 - pathPoint.x) + pathPoint.y;

var line = svg.append("svg:path")
    .style("stroke","green")
    .attr("d", "M" + pathPoint.x + "," + pathPoint.y + " L" + x0 +","+ y0);