d3 v4 error this.setAttribute is not a function

Question

I am trying to convert the following example to be d3 v4 compatible http://bl.ocks.org/ameyms/9184728

I have been able to convert almost all of it, but I am having trouble with the following function:

  this.el.transition().delay(100).duration(200).select('.needle').tween('reset-progress', function() {
    return function(percentOfPercent) {
      var progress = (1 - percentOfPercent) * oldValue;

      repaintGauge(progress);
      return d3.select(this).attr('d', recalcPointerPos.call(self, progress));
    };
  });

The error I'm getting is this.setAttribute is not a function on the line with the return. I've verified that recalcPointerPos is working correctly, so I think the issue is with the d3.select(this).attr syntax. Did something change for this type of selection between v3 and v4?

fiddle: https://jsfiddle.net/v1tok1k6/

Answer 1

The inner return select has the wrong this scope for selecting the element. What you want is the outer functions this, which represents the path element. I'd do the select on the outer scope for caching.

this.el.transition().delay(300).duration(1500).select('.needle').tween('progress', function(d, i, e) {
  var needle = d3.select(this);
  return function(percentOfPercent) {
    var progress = percentOfPercent * perc;

    repaintGauge(progress);
    return needle.attr('d', recalcPointerPos.call(self, progress));
  };
});

updated fiddle