Dynamic Arrowhead Color

Question

Używam D3 do rysowania Directed Acyclic Graph i chciałbym móc podświetlić ścieżkę do wybranego węzła, zmieniając kolor krawędzi (i grotów) na tę ścieżkę. Łatwo zmieniłem kolor krawędzi, ale nie mogę wymyślić, jak zmienić kolor odpowiednich strzałek. Stwierdziłem, że nie jest to możliwe, ale jest również sprzed około dwóch lat, więc szukam, czy coś się zmieniło. Kod używam do tworzenia linków, groty i połączyć zmiana koloru jest poniżej:

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

Wszelkie porady byłoby świetnie. Dziękuję Ci.

Answer 1

Nie jest to najlepsze rozwiązanie, ale można wyciągnąć grotów podobnych

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

strzałką i jej głowie mają ten sam indeks (bo mają te same dane dołączone).

Tak, można użyć d3.select("#arrowHead0" + arrowIndex).attr("fill", "black");

Answer 2

Tworzenie funkcji i daje wartość powrócić do niego i val powinna być dynamiczna:

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