I am trying to convert the following example to be d3 v4 patible

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: /

I am trying to convert the following example to be d3 v4 patible http://bl.ocks/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/v1tok1k6/

• javascript
• d3.js
• svg

Share Improve this question Follow asked Feb 24, 2017 at 7:28 mattgabormattgabor 2,08466 gold badges2626 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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