score:1

Accepted answer

If you have already included the needed d3 includes (make sure you are using the correct version for this code -- version 5), then you would put the actual code example in-between tags. Example:

<script>
const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 250);

const simpleGauge = new window.d3SimpleGauge.SimpleGauge({
  el: svg.append('g'),        // The element that hosts the gauge
  height: 200,                // The height of the gauge   
  interval: [0, 200],         // The interval (min and max values) of the gauge (optional)
  sectionsCount: 2,           // The number of sections in the gauge
  width: 400                  // The width of the gauge
});

setTimeout(() => {
  simpleGauge.percent = 0.7;  // The new percent of the needle to set (70%)

  setTimeout(() => {
    simpleGauge.value = 42;  // The new value of the needle to set inside the interval (21%)
  }, 1500);
}, 1500);
</script>

Keep in mind that this project requires d3.js v5 which makes use of promises. Promises simplify the structure of asynchronous code, especially in modern browsers that support async and await.

The example code attaches the svg to the body, however you may want to attach it to a div so you can position it correctly on the page.

If you have further questions about usage, feel free to leave a comment.


Related Query

More Query from same tag