Accepted answer

Both behaviors are the result that you are resetting the current state of the gauge on every redraw. Try taking out the lines:

  .attr("transform", null)
  .style("fill", null);

The transform takes the gauge back to the origin and the fill takes it back to black.


This function will fix the bounce. I needed an interpolation function to remove the bouncing. a is the prior position.

        .style("fill", this.valueToColor(value))
        .attrTween("transform", tween);

    function tween(d, i, a) {
      return d3.interpolateString(a, "rotate(" + rotateAngle + ", 150, 150)");

Related Query

More Query from same tag