title: Dynamic Arrowhead Color
body: <p>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 <a href="https://groups.google.com/forum/#!topic/d3-js/08uROmH28HA">most applicable source</a> 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:</p>
  
  <pre><code>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";
        }
      });
  }
  </code></pre>
  
  <p>Any advice would be great. Thank you.</p>