Reusing path definition

forked from anonymous's block: Reusing path definition

<!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>

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>

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