D3 Examples - Reusing path definition

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .target-arrow,
    .target-line {
      fill: red;
      stroke: red;
    }
    .target-line {
      stroke-dasharray: 5, 4;
      stroke-width: 1.5;
    }
    .ytd-bar {
      fill: steelblue;
    }
    .projected-bar {
      fill: orange;
    }
  </style>
</head>
​
<body>
    <svg xmlns="https://www.w3.org/2000/svg" class="total-commission-svg">
      <defs>
        <path id="target-arrow" d="M0,0,L3,5,L6,0,Z" />
      </defs>
      <g class="chart">
        <g class="chart-bars">
          <rect class="ytd-bar" y="30" x="0" width="0" height="40" />
          <rect class="projected-bar" y="70" x="0" width="0" height="40" />
        </g>
        <g class="revenue-target-marker">
          <use class="target-arrow" xlink:href="#target-arrow" />
          <line x1="0" y1="0" x2="0" y2="106" class="target-line" />
        </g>
      </g>
    </svg>
  <script>
​
    var svg = d3.select("svg")
      .attr("width", 400)
      .attr("height", 200);
​
    svg.select('.chart').attr('transform', 'translate(20, 20)');
    
    // This is an example, in real life we will use scale to find proper value
    var target = 100;
    var ytd = 150;
    var proj = 200;
    
    var arrow = svg.select('.target-arrow');
    var line = svg.select('.target-line');
        
    arrow.attr('transform', 'translate(' + target + ', 0)');
    line.attr('transform', 'translate(' + (target + 3) + ', 6)');
    
    var ytdBar = svg.select('.ytd-bar');
    var projBar = svg.select('.projected-bar');
    ytdBar.attr('width', ytd);
    projBar.attr('width', proj);
​
  </script>
</body>
​
    