Line ordinal

<!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; }
    line {
       stroke: black;
    }
    svg { 
      border: 1px solid red;
    }
    
    #container { position: relative; }
    
    .label { position: absolute; }
    
  </style>
</head>

<div class="label" id="catA">Category A</div>
    <div class="label" id="catB">Category B</div>
  </div>
  <script>
    const margin = 24,
          width = 350,
          height = 300,
          smallMargin = 8;
    
    var svg = d3.select("svg")
      .attr("width", width)
      .attr("height", height)

svg.append("line")
    	.attr("x1", 0 + margin)
    	.attr("x2", width - margin)
    	.attr("y1", height / 2)
    	.attr("y2", height / 2)
    	.attr("marker-end", "url(#arrowEnd)")
    	.attr("marker-start", "url(#arrowStart)")

</script>
</body>

https://d3js.org/d3.v4.min.js