CODEWITHSUNDEEP
javascriptd3.jssvg
mattgabor
mattgabor

Reputation: 2084

d3 v4 error this.setAttribute is not a function

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

Upvotes: 3

Views: 9212

Answers (1)

Imperative
Imperative

Reputation: 3183

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

Upvotes: 5

Related Questions