Pointer

Pointers, maybe you will need somedays.

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

<body>

var pointer = {
  pointDown : "M0 0 " +
    "L" + nonius + " " + -nonius + " " +
    "L" + nonius + " " + -2 * nonius + " " +
    "L" + (-nonius) + " " + -2 * nonius + " " +
    "L" + (-nonius) + " " + -nonius + " Z",
    
    pointUp : "M0 0 " +
    "L" + nonius + " " + nonius + " " +
    "L" + nonius + " " + 2 * nonius + " " +
    "L" + (-nonius) + " " + 2 * nonius + " " +
    "L" + (-nonius) + " " + nonius + " Z",
    
    pointLeft : "M0 0 " +
    "L" + nonius + " " + -nonius + " " +
    "L" + 2 * nonius + " " + -nonius + " " +
    "L" + 2 * nonius + " " + nonius + " " +
    "L" + nonius + " " + nonius + " Z",
    
    pointRight : "M0 0 " +
    "L" + -nonius + " " + -nonius + " " +
    "L" + -2 * nonius + " " + -nonius + " " +
    "L" + -2 * nonius + " " + nonius + " " +
    "L" + -nonius + " " + nonius + " Z"
}
d3.select("#U2")
  .append("g")
  .attr("transform", "translate(100,100)")
  .append('path')
  .attr("d", pointer.pointUp)
  .attr("fill", "steelblue");

d3.select("#direction").on("change", function(){
  var val = d3.select(this).property("value");
  d3.select("#U2 g")
    .html("")
    .append('path')
    .attr("d", pointer[val])
    .attr("fill", "steelblue");
})

</script>
</body>

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