Dynamic Arrowhead Color

Question

Sto usando D3 per disegnare un grafico aciclico diretto e vorrei essere in grado di evidenziare il percorso di un nodo selezionato cambiando il colore dei bordi (e delle punte di freccia) su quel percorso. Sono stato facilmente in grado di cambiare il colore del bordo, ma non riesco a capire come cambiare il colore delle punte della freccia corrispondenti. Il most applicable source che ho trovato suggerisce che questo non era possibile, ma è anche da circa due anni fa, quindi sto cercando di vedere se le cose sono cambiate. Il codice che sto usando per creare i collegamenti, punte di freccia, e il colore collegamento per l'aggiornamento è qui sotto:

graph.append("svg:defs").selectAll("marker") 
    .data(["end"]) 
    .enter().append("svg:marker")  
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 20) 
    .attr("refY", 0) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .style("fill", "gray") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

. . . 

var link = graph.append("svg:g").selectAll("line") 
    .data(json.links) 
    .enter().append("svg:line") 
    .style("stroke", "gray") 
    .attr("class", "link") 
    .attr("marker-end", "url(#end)"); 

. . . 

function highlightPath(node) { 
    d3.selectAll("line") 
    .style("stroke", function(d) { 
     if (d.target.name == node) { 
     highlightPath(d.source.name); 
     return "lightcoral"; 
     } else { 
     return "gray"; 
     } 
    }); 
} 

Tutto il consiglio sarebbe grande. Grazie.

Answer 1

Non è la migliore soluzione, ma è possibile disegnare punte di freccia come questo

var arrowHeads = svg.selectAll("polygon.arrowHeads") //arrow heads are triangles 
    .data(links) 
    .enter().append("polygon") 
    .attr("id", function(d, i) {return "arrowHead0" + i}) 
    .attr("points", function(d, i) { 
     //function here that outputs the three points of a triangle 
    }) 
; 

una freccia e il suo capo hanno lo stesso indice (perché hanno gli stessi dati allegati).

Quindi, è possibile utilizzare d3.select("#arrowHead0" + arrowIndex).attr("fill", "black");

Answer 2

Creare una funzione e dare un valore di ritorno ad esso e val dovrebbe essere dinamica:

function marker (color) { 
    var val; 
    graph.append("svg:defs").selectAll("marker") 
     .data([val]) 
     .enter().append("svg:marker")  
     .attr("id", String) 
     .attr("viewBox", "0 -5 10 10") 
     .attr("refX", 20) 
     .attr("refY", 0) 
     .attr("markerWidth", 6) 
     .attr("markerHeight", 6) 
     .attr("orient", "auto") 
     .style("fill", color) 
     .append("svg:path") 
     .attr("d", "M0,-5L10,0L0,5"); 
    return "url(#" +val+ ")"; 
} 

var link = graph.append("svg:g").selectAll("line") 
       .data(json.links) 
       .enter().append("svg:line") 
       .style("stroke", "gray") 
       .attr("class", "link") 
       .attr("marker-end", marker); //"url(#end)"