d3 v4錯誤this.setAttribute不是函數

Question

我試圖將以下示例轉換為d3 v4兼容http://bl.ocks.org/ameyms/9184728

我已經能夠轉換幾乎所有的，但我遇到以下功能的問題：

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

我得到的錯誤是this.setAttribute is not a function返回行this.setAttribute is not a function 。 我已經驗證了recalcPointerPos正常工作，所以我認為問題在於d3.select（this）.attr語法。 v3和v4之間的這種選擇有什么變化嗎？

小提琴： https ： //jsfiddle.net/v1tok1k6/

Answer 1

內部返回選擇有錯誤的this范圍內選擇的元素。 你想要的是外部函數this ，它代表了path元素。 我在外部作用域上進行選擇以進行緩存。

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

更新小提琴