score:0

have a look at marker-end attribute, which will automatically append defined marker, and also orient it the right way if the marker has orient attribute set as auto.

<!doctype html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin: 0;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <script>
    // feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 300)
      .attr("height", 100);

    svg.append('defs').append('marker')
      .attr('id', 'arrow')
      .attr('viewbox', '0 0 10 6')
      .attr('refx', 10)
      .attr('refy', 3)
      .attr('markerwidth', 10)
      .attr('markerheight', 6)
      .attr('markerunits', 'userspaceonuse')
      .attr('orient', 'auto')
      .append('path')
      .attr('d', 'm 0 0 l 10 3 l 0 6 z');

    svg.append('g')
      .attr('transform', 'translate(10,10)')
      .selectall('path')
      .data(d3.range(4))
      .enter()
      .append('path')
      .style('stroke', 'black')
      .style('fill', 'none')
      .attr('marker-end', 'url(#arrow)')
      .attr('d', function(d, i) {
        return 'm 0 0 l 50 ' + i * 20;
      })
  </script>
</body>


Related Query