D3 Examples - Pointer

xxxxxxxxxx
 
<!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>
​
  <svg id="U2" width="200" height="200" style="border:1px dashed #ccc;margin:10px"></svg>
  <br/>
  <select name="" id="direction">
  <option value="pointDown">pointDown</option>
  <option value="pointUp" selected>pointUp</option>
  <option value="pointLeft">pointLeft</option>
  <option value="pointRight">pointRight</option>
</select>
  <script>
    
var nonius = 10;
​
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>
​
    