0

I have colored lines in my d3.js network that depend on some attribute of the nodes that the line connects. I would like to add an arrow to my link that matches the color of the line instead of being the same color. This is the code I have for making the same colored arrows:

    var arrow = svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", radius/2)
    .attr("markerHeight", radius/2)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");
  
  var link = svg.append("g")
      .attr("class", "links")
      .selectAll("line")
      .data(links)
      .enter().append("line")
      .attr("stroke-width", radius*.25)
      .attr("stroke",function(d){return color(node_color_map[d.source])})
      .attr("marker-end", "url(#end)")
      .attr("stroke",function(d){return color(node_color_map[d.source])})
      ;

Any suggestion is appreciated. Thank you!

Mayur Kamble
  • 180
  • 4
Michael Higgins
  • 321
  • 3
  • 7
  • After more searching, I found this, which solves it well. https://stackoverflow.com/questions/51293396/arrow-head-and-link-of-the-same-color-in-d3-js-graph – Michael Higgins Dec 19 '22 at 20:59

0 Answers0