Dynamic arrow color

Question

I am using D3 to draw an acyclic graphic, and I would like to highlight the path to the selected node by changing the color of the edges (and arrows) to that path. I could easily change the color of the edge, but I cannot figure out how to change the color of the corresponding arrows. the most applicable source that I found suggests that this was not possible, but it is also about two years ago, so I look to see if everything has changed. The code I use to create the links, arrows, and link color of the updates below:

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

Any advice would be great. Thanks.

Answer 1

Create a function and give it a return value, and val should be dynamic:

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

Answer 2

Not the best solution, but you can draw arrows like this

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

the arrow and its head have the same index (since they have the same data attached).

So you can use d3.select("#arrowHead0" + arrowIndex).attr("fill", "black");