Mettre une flèche (marqueur) à un point précis d'un chemin lors de l'utilisation de la bibliothèque javascript d3

Je travaille actuellement sur un graphique de visualisation et d'-je utiliser le SVG et le D3 de la bibliothèque. J'ai été invité par notre designer si je peux mettre les pointes de flèches de les arêtes du graphe sur un poste correspondant à 80% de la longueur des lignes.
J'ai été en mesure de réaliser la première partie de la position à l'aide de la getPointAtLength méthode.

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);

Ici est un jsfidle exemple

Maintenant, je me demande comment ca j'attache une pointe de flèche à la position correspondant à l'orientation. Plus important, comment puis-je faire afin que je puisse mettre à jour les arêtes du graphe lors du déplacement des nœuds associés.
Je n'ai pas pu trouver aucune réponse pour l'instant, les exemples sur les "marqueurs" sont de travailler avec des propriétés de chemin comme : style (repère-end", "url(#fin de la flèche)")

source d'informationauteur karlitos

  1. 6

    Tout d'abord, la longue réponse de DONC. La réponse rapide est SVG <marqueurs>

    L' (de base) à réponse courte: Prendre un point un peu avant le point rouge, mesure de la pente et de tracer une ligne entre les deux points. Maintenant, la question est simplifié à l': Comment ajouter une flèche à la fin d'une ligne droite? Utiliser la réponse rapide.

    Ajouter à votre code pour visualiser la réponse:-

    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);