我正在尝试将以下示例转换为兼容 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 之间的此类选择有什么变化吗?
fiddle :https://jsfiddle.net/v1tok1k6/
最佳答案
内部返回选择具有用于选择元素的错误 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));
};
});
关于javascript - d3 v4 错误 this.setAttribute 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42433009/