d3 v4 Fehler this.setAttribute ist keine Funktion

Question

Ich versuche, das folgende Beispiel zu konvertieren sein d3 v4 kompatibel http://bl.ocks.org/ameyms/9184728

konnte ich fast alle konvertieren, aber ich habe Probleme mit der folgenden Funktion:

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

der Fehler ich erhalte ist this.setAttribute is not a function auf der Linie mit der Rückkehr. Ich habe überprüft, dass recalcPointerPos funktioniert ordnungsgemäß, so dass ich denke, das Problem ist mit der Syntax d3.select (this) .attr. Hat sich bei dieser Art der Auswahl zwischen v3 und v4 etwas geändert?

Geige: https://jsfiddle.net/v1tok1k6/

Answer 1

Der innere Rücklauf wählen hat den falschen this Spielraum für das Element ausgewählt wird. Was Sie wollen, ist die äußere Funktionen this, die das path Element darstellt. Ich würde die Auswahl auf dem äußeren Bereich für das Caching vornehmen.

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