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与返回值有关。我已经验证它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));
  };
});

更新了小提琴