Dynamic Arrowhead Color
colors, d3.js, javascript
Solution
Create a function and give a return value to it 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)"
Problem
I am using D3 to draw a Directed Acyclic Graph and I would like to be able to highlight the path to a selected node by changing the color of the edges (and arrowheads) to that path. I was easily able to change the edge color, but I cannot figure out how to change the color of the corresponding arrowheads. The most applicable source I have found suggests that this was no possible, but it is also from about two years ago, so I am looking to see if things have changed. The code I am using to create the links, arrowheads, and update link color is 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. Thank you.