I've been attempting to create a gauge with a needle that changes the background color of the ring for the past few days.
My goal is to dynamically update the colors of an arc within a gauge I developed in d3.js
This is my current gauge setup with the arc:
var randomConfigObject = {
size: 200,
clipWidth: 200,
clipHeight: 110,
ringInset: 20,
ringWidth: 20,
pointerWidth: 10,
pointerTailLength: 5,
pointerHeadLengthPercent: 0.9,
minValue: 0,
maxValue: 10,
minAngle: -90 - 45,
maxAngle: 90 + 45,
transitionMs: 750,
majorTicks: 5,
labelFormat: d3.format(',g'),
labelInset: 10,
arcColorFn: d3.interpolateHsl(d3.rgb('#e8e2ca'), d3.rgb('#3e6c0a'))
};
// more code here...
if ( !window.isLoaded ) {
window.addEventListener("load", function() {
onDocumentReady();
// Very dodge way of doing this!
document.getElementById('pointer').append(document.getElementById('plane'));
}, false);
} else {
onDocumentReady();
}// CSS styles go here...
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<div id="power-gauge"></div>
<br>
<svg width="1200" height="600" viewBox="0 0 900 350">
<g id="plane" style="" transform="translate(-55) scale(0.15, 0.15) rotate(-45 100 100)">
<defs id="defs0"></defs>
<path id="planepath" d="M 439.48098,95.969555 L 393.34268,142.46481 L ... fill-opacity:1;fill-rule:nonzero;stroke:none;marker:none;visibility:visible;display:inline;overflow:visible" id="path1"></path>
</g>
</svg>I want to achieve the same effect as this example but with a moving needle and changing arc color:
Any help would be appreciated. Thank you.