D3 Transition: Rotation And Translation

I'm brand new to d3 and I like it so far, but I'm trying to put something together and can't figure out how to correct certain behaviors. Here's a demo of what I'm trying to do: [R

Solution 1:

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.

Solution 2:

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);

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