show needle value with needle in d3.js gauge

i have two gauges in made through d3.js with each one having its own value. Now i just want to show min and max values at gauges end as well value where the needle is pointing.i am not familiar with programming languages and need it to show something on webpage. the code i am using is as below

var gauge = function(container, configuration) {      var that = {};      var config = {          size                        : 400,          clipWidth                   : 400,          clipHeight                  : 270,          ringInset                   : 20,          ringWidth                   : 90,                    pointerWidth                : 5,          pointerTailLength           : 0,          pointerHeadLengthPercent    : 0.85,                    minValue                    : 0,          maxValue                    : 650,                    minAngle                    : -90,          maxAngle                    : 90,                    transitionMs                : 750,                    majorTicks                  : 600,                    labelFormat                 : d3.format(',g'),          labelInset                  : 100,                    arcColorFn                  : d3.interpolateHsl(d3.rgb('#f64e60'), d3.rgb('#41a4fe'))      };      var range = undefined;      var r = undefined;      var pointerHeadLength = undefined;      var value = 0;            var svg = undefined;      var arc = undefined;      var scale = undefined;      var ticks = undefined;      var tickData = undefined;      var pointer = undefined;        var donut = d3.layout.pie();            function deg2rad(deg) {          return deg * Math.PI / 180;      }            function newAngle(d) {          var ratio = scale(d);          var newAngle = config.minAngle + (ratio * range);          return newAngle;      }            function configure(configuration) {          var prop = undefined;          for ( prop in configuration ) {              config[prop] = configuration[prop];          }                    range = config.maxAngle - config.minAngle;          r = config.size / 2;          pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);            // a linear scale that maps domain values to a percent from 0..1          scale = d3.scale.linear()              .range([0,1])              .domain([config.minValue, config.maxValue]);                        ticks = scale.ticks(config.majorTicks);          tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;});                    arc = d3.svg.arc()              .innerRadius(r - config.ringWidth - config.ringInset)              .outerRadius(r - config.ringInset)              .startAngle(function(d, i) {                  var ratio = d * i;                  return deg2rad(config.minAngle + (ratio * range));              })              .endAngle(function(d, i) {                  var ratio = d * (i+1);                  return deg2rad(config.minAngle + (ratio * range));              });      }      that.configure = configure;            function centerTranslation() {          return 'translate('+r +','+ r +')';      }            function isRendered() {          return (svg !== undefined);      }      that.isRendered = isRendered;            function render(newValue) {          svg = d3.select(container)              .append('svg:svg')                  .attr('class', 'gauge')                  .attr('width', config.clipWidth)                  .attr('height', config.clipHeight);                    var centerTx = centerTranslation();                    var arcs = svg.append('g')                  .attr('class', 'arc')                  .attr('transform', centerTx);                                               arcs.selectAll('path')                  .data(tickData)              .enter().append('path')                  .attr('fill', function(d, i) {                      return config.arcColorFn(d * i);                  })                  .attr('d', arc);                    var lg = svg.append('g')                  .attr('class', 'label')                  .attr('transform', centerTx);          lg.selectAll('text')                  .data(ticks)              //.enter().append('text')                  .attr('transform', function(d) {                      var ratio = scale(d);                      var newAngle = config.minAngle + (ratio *                                                          range);                      return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')';                  })                  .text(config.labelFormat);            var lineData = [ [config.pointerWidth / 2, 0],                           [0, -pointerHeadLength],                          [-(config.pointerWidth / 2), 0],                          [0, config.pointerTailLength],                          [config.pointerWidth / 2, 0] ];          var pointerLine = d3.svg.line().interpolate('monotone');          var pg = svg.append('g').data([lineData])                  .attr('class', 'pointer')                  .attr('transform', centerTx);                            pointer = pg.append('path')              .attr('d', pointerLine/*function(d) { return pointerLine(d) +'Z';}*/ )              .attr('transform', 'rotate(' +config.minAngle + ')');                        update(newValue = 430);          //== undefined ? 0 : newValue);      }      that.render = render;            function update(newValue, newConfiguration) {          if ( newConfiguration  !== undefined) {              configure(newConfiguration);          }          var ratio = scale(newValue);          var newAngle = config.minAngle + (ratio * range);          pointer.transition()              .duration(config.transitionMs)              .ease('elastic')              .attr('transform', 'rotate(' +newAngle +')');      }      that.update = update;        configure(configuration);            return that;  };  </script>    <script>  function onDocumentReady() {      var powerGauge = gauge('#action', {          size: 400,          clipWidth: 400,          clipHeight: 400,          ringWidth: 80,          maxValue: 650,          transitionMs: 4000,      });      powerGauge.render();      powerGauge.update(110);                var powerGauge2 = gauge('#action1', {          size: 400,          clipWidth: 400,          clipHeight: 400,          ringWidth: 80,          maxValue: 650,          transitionMs: 4000,      });      powerGauge2.render();      powerGauge2.update(500);          //window.setTimeout(function() {  //  custom.update(120);  //}, 4000);        window.setTimeout(function() {    custom2.update(68);  }, 4000);                  // every few seconds update reading values      //updateReadings();      //setInterval(function() {          //updateReadings();      //}, 1000);  }    if ( !window.isLoaded ) {      window.addEventListener("load", function() {          onDocumentReady();      }, false);  } else {      onDocumentReady();  }

    body {          font-family:  Helvetica, Arial, sans-serif;          margin: 32px;      }        #power-gauge g.arc {          fill: red;      }        #power-gauge g.pointer {          fill: yellow;          stroke: yellow;      }            #power-gauge g.label text {          text-anchor: middle;          font-size: 14px;          font-weight: bold;          fill: #000;      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>  <div id="action"></div>  <div id="action1"></div>

    function centerTranslation() {          return 'translate('+r +','+ r +')';      }            function isRendered() {          return (svg !== undefined);      }      that.isRendered = isRendered;            function render(newValue) {          svg = d3.select(container)              .append('svg:svg')                  .attr('class', 'gauge')                  .attr('width', config.clipWidth)                  .attr('height', config.clipHeight);                    var centerTx = centerTranslation();                    var arcs = svg.append('g')                  .attr('class', 'arc')                  .attr('transform', centerTx);                                               arcs.selectAll('path')                  .data(tickData)              .enter().append('path')                  .attr('fill', function(d, i) {                      return config.arcColorFn(d * i);                  })                  .attr('d', arc);                    var lg = svg.append('g')                  .attr('class', 'label')                  .attr('transform', centerTx);          lg.selectAll('text')                  .data(ticks)              //.enter().append('text')                  .attr('transform', function(d) {                      var ratio = scale(d);                      var newAngle = config.minAngle + (ratio *                                                          range);                      return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')';                  })                  .text(config.labelFormat);            var lineData = [ [config.pointerWidth / 2, 0],                           [0, -pointerHeadLength],                          [-(config.pointerWidth / 2), 0],                          [0, config.pointerTailLength],                          [config.pointerWidth / 2, 0] ];          var pointerLine = d3.svg.line().interpolate('monotone');          var pg = svg.append('g').data([lineData])                  .attr('class', 'pointer')                  .attr('transform', centerTx);                            pointer = pg.append('path')              .attr('d', pointerLine/*function(d) { return pointerLine(d) +'Z';}*/ )              .attr('transform', 'rotate(' +config.minAngle + ')');                        update(newValue = 430);          //== undefined ? 0 : newValue);      }      that.render = render;            function update(newValue, newConfiguration) {          if ( newConfiguration  !== undefined) {              configure(newConfiguration);          }          var ratio = scale(newValue);          var newAngle = config.minAngle + (ratio * range);          pointer.transition()              .duration(config.transitionMs)              .ease('elastic')              .attr('transform', 'rotate(' +newAngle +')');      }      that.update = update;        configure(configuration);            return that;  };  </script>    <script>  function onDocumentReady() {      var powerGauge = gauge('#action', {          size: 400,          clipWidth: 400,          clipHeight: 400,          ringWidth: 80,          maxValue: 650,          transitionMs: 4000,      });      powerGauge.render();      powerGauge.update(110);                var powerGauge2 = gauge('#action1', {          size: 400,          clipWidth: 400,          clipHeight: 400,          ringWidth: 80,          maxValue: 650,          transitionMs: 4000,      });      powerGauge2.render();      powerGauge2.update(500);          //window.setTimeout(function() {  //  custom.update(120);  //}, 4000);        window.setTimeout(function() {    custom2.update(68);  }, 4000);                  // every few seconds update reading values      //updateReadings();      //setInterval(function() {          //updateReadings();      //}, 1000);  }    if ( !window.isLoaded ) {      window.addEventListener("load", function() {          onDocumentReady();      }, false);  } else {      onDocumentReady();  }  </script>  </body>  </html>  

i just want to show minimum and maximum values at ends for both gauges and the needle value right above where needle is pointing. i tried using googling but code is hard for me to understand

https://stackoverflow.com/questions/67015158/show-needle-value-with-needle-in-d3-js-gauge April 09, 2021 at 12:42PM