Dynamische Pfeilspitze Farbe

Question

Ich verwende D3, um einen gerichteten azyklischen Graphen zu zeichnen, und ich möchte den Pfad zu einem ausgewählten Knoten markieren, indem ich die Farbe der Kanten (und Pfeilspitzen) auf diesen Pfad ändere. Ich konnte die Randfarbe leicht ändern, aber ich kann nicht herausfinden, wie man die Farbe der entsprechenden Pfeilspitzen ändert. Die most applicable source Ich habe gefunden, dass dies nicht möglich war, aber es ist auch vor etwa zwei Jahren, also ich sehe, ob sich die Dinge geändert haben. Der Code, den ich die Links erstellen bin mit, Pfeilspitzen und Update-Link Farbe ist unten:

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

Jede Beratung wäre toll. Vielen Dank.

Answer 1

nicht die beste Lösung, aber man konnte Pfeilspitzen wie diese

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

einen Pfeil und den Kopf ziehen den gleichen Index (weil sie die gleichen Daten angebracht haben).

So konnten Sie d3.select("#arrowHead0" + arrowIndex).attr("fill", "black");

Answer 2

Erstellen Sie eine Funktion verwenden und einen Rückgabewert geben und val sollte dynamisch sein:

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