score:1

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:

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

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

score:0

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

pointer.transition()
        .style("fill", this.valueToColor(value))
        .duration(1000)
        .ease("bounce")
        .attrTween("transform", tween);

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

Related Query

More Query from same tag