title: Convert SVG semi-circle arc to full-circle arc using Path
body: <p>I'm trying to convert this semi-circle arc into a full circle, or at least an almost full circle with small disconnected notch at the bottom.</p>
  <h3>I've tried changing the 180 to 360.</h3>
  <h3>I have also tried changing the 0, 0, 1 ,parameters to change the rotation of the arc, but that seems to have a rotation / flipping effect, rather than elongating the arc.</h3>
  <p><a href="https://i.stack.imgur.com/vHaDY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vHaDY.png" alt="Gauge widget" /></a>
  <br></p>
  <p>This code is in AngularJS, but should not detract from math involved to solve this.</p>
  <p>This example is modified from from Pluralsight's Scalable Dynamic Graphs &amp; Charts Using AngularJS and SVG Course.</p>
  <p><a href="https://embed.plnkr.co/NUYeVbz9x7uma3ecvz63/" rel="nofollow noreferrer">Plunker Link</a></p>
  <h3>gauge.component.js</h3>
  <pre><code>angular.module('app.gauge', []);
  angular.module('app.gauge')
    .component('gauge', {
      require: {
        parent: '^appMain'
      },
      bindings: {
        centerX: '=',
        centerY: '=',
        radius: '&lt;',
        maxValue: '&lt;',
        gradientInterval: '&lt;',
        currentValue: '&lt;',
        gradientsOffset: '&lt;'
      },
      controller: GaugeCtrl,
      controllerAs: 'gauge',
      templateUrl: 'gauge.html',
      bindToController: true
    });
  
  function GaugeCtrl(d3, $scope) {
    var gauge = this;
    // preset defaults
    gauge.specs = {
      centerX: 0, // pass in 300
      centerY: 0, // pass in 300
      radius: 0, // pass in 200
      maxValue: 0, // pass in 180
      gradientInterval: 0,
      currentValue: 0, // 45 passed in
      gradients: [],
      gradientsOffset: 0, // 10 
      maxValueCoordinates: null
    };
  
    // pass in values from component passed-in values
    function initPassedInValues() {
      // grab all props from controller
      var keys = Object.keys(gauge);
      // if ctrl key is in gauge.specs object, copy over to specs
      keys.forEach(function(key,idx){
        if (gauge.specs.hasOwnProperty(key)) {
          gauge.specs[key] = gauge[key];
        }
      });   
    }
  
    // passedin padding
    gauge.$onInit = function() {
      initPassedInValues(); // process passed-in values from component
      initGauge();
      initGradients();
    }
  
    gauge.$postLink = function() {
    
    }
  
    // function defs
    var getCoordinatesForAngle = function(centerX, centerY, radius, angleInDegrees) {
      var angleInRadians = ((angleInDegrees - 180.0) * Math.PI / 180.0);
      return {
        x: parseInt(centerX + (radius * Math.cos(angleInRadians))),
        y: parseInt(centerY + (radius * Math.sin(angleInRadians)))
      };
    };
  
    // calc background and value arc
      // radius as param - diff for circle vs. text path 
    var getArcPathForAngle = function(startingAngle, endingAngle, radius){
      var startingPt = getCoordinatesForAngle(
          gauge.specs.centerX,
          gauge.specs.centerY,
          radius,
          startingAngle);
  
      var endingPt = getCoordinatesForAngle(
          gauge.specs.centerX,
          gauge.specs.centerY,
          radius,
          endingAngle);
  
      return [&quot;M&quot;, startingPt.x, startingPt.y, &quot;A&quot;, radius, radius, 0, 0, 1, endingPt.x, endingPt.y].join(' ');
    };
  
    // textPath ticks
    function initGradients() {
      // use &lt; instead of &lt;= so doesn't show last value, taken care of with fixLastGradientTextValue fn
      for (var value = 0, offset = 0; value &lt; gauge.specs.maxValue; value += gauge.specs.gradientInterval, offset += 100/18) {
        gauge.specs.gradients.push({value: value, offset: offset});
      }
    }
  
    function initGauge() {
      // draw background
      gauge.background = getArcPathForAngle(0, gauge.specs.maxValue, gauge.specs.radius);
      // draw gauge value
      gauge.value = getArcPathForAngle(0, gauge.specs.currentValue, gauge.specs.radius);
      // draw gradient tick values
      gauge.gradients = getArcPathForAngle(0, gauge.specs.maxValue, gauge.specs.radius + gauge.specs.gradientsOffset);
      // fix last text value and rotate
      gauge.specs.maxValueCoordinates = getCoordinatesForAngle(
        gauge.specs.centerX,
        gauge.specs.centerY,
        gauge.specs.radius + gauge.specs.gradientsOffset,
        gauge.specs.maxValue);
    }
  
    // additional watcher for currentValue
    $scope.$watch('gauge.specs.currentValue', function(oldValue, newValue) {
      initGauge();
    }, true);
  }
  </code></pre>
  <h3>gauge.html</h3>
  <pre><code>&lt;div class=&quot;svg-container gauge&quot;&gt;
    &lt;!-- gauge --&gt;
    &lt;svg class=&quot;svg-scalable&quot; viewBox=&quot;0 0 600 400&quot; preserveAspectRation=&quot;xMidYMid meet&quot;&gt;
  
      &lt;g&gt;
        &lt;!-- background --&gt;
        &lt;path id=&quot;gaugeBackground&quot; ng-attr-d=&quot;{{ gauge.background }}&quot; stroke-width=&quot;10&quot; stroke=&quot;black&quot; fill=&quot;none&quot;/&gt;
    
        &lt;!-- gauge value --&gt;
        &lt;path ng-attr-d=&quot;{{ gauge.value }}&quot; stroke-width=&quot;10&quot; stroke=&quot;#2a9fbc&quot; fill=&quot;none&quot;/&gt;
    
        &lt;!-- invisible arc for textPath to follow, slightly larger --&gt;
        &lt;path id=&quot;gradients&quot; ng-attr-d=&quot;{{ gauge.gradients }}&quot; stroke width=&quot;0&quot; fill=&quot;none&quot; /&gt;
    
        &lt;!-- gradient ticks --&gt;
        &lt;text ng-repeat=&quot;gradient in gauge.specs.gradients&quot; dx=&quot;0&quot; dy=&quot;0&quot; text-anchor=&quot;middle&quot; style=&quot;font: bold large arial&quot;&gt;
          &lt;textPath xlink:href=&quot;#gradients&quot; startOffset=&quot;{{ gradient.offset }}%&quot;&gt;
            {{ gradient.value }}
          &lt;/textPath&gt;
        &lt;/text&gt;
    
        &lt;!-- Fix for last tick--&gt;
        &lt;text dx=&quot;{{ gauge.specs.maxValueCoordinates.x }}&quot; dy=&quot;{{ gauge.specs.maxValueCoordinates.y }}&quot; text-anchor=&quot;middle&quot; style=&quot;font: bold large arial&quot; transform=&quot;rotate(90, {{ gauge.specs.maxValueCoordinates.x}}, {{ gauge.specs.maxValueCoordinates.y }} )&quot;&gt;
         {{ gauge.specs.maxValue }}
        &lt;/text&gt;
    
        &lt;text dx=&quot;50%&quot; dy=&quot;50%&quot; text-anchor=&quot;middle&quot; 
      alignment-baseline=&quot;hanging&quot; style=&quot;font-size: 7rem&quot;&gt;
          {{ gauge.specs.currentValue }}
        &lt;/text&gt; 
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  <h3>app-main.html -- passed in defaults</h3>
  <pre><code>...
  &lt;!-- Gauge component --&gt;
  &lt;gauge center-x=&quot;300&quot;
    center-y=&quot;300&quot;
    radius=&quot;200&quot;
    max-value=&quot;180&quot;
    gradient-interval=&quot;10&quot;
    current-value=&quot;45&quot;
    gradients-offset=&quot;10&quot;&gt; 
  &lt;/gauge&gt;
  ...
  </code></pre>