There was an issue with d3 version 4: the function this.setAttribute() was not

Question

There was an issue with d3 version 4: the function this.setAttribute() was not

I am attempting to update the provided example to be compatible with d3 version 4 http://bl.ocks.org/ameyms/9184728

Most of the code has been successfully converted, but I am encountering difficulties 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 message I am seeing is

this.setAttribute is not a function

on the line that contains the return statement. It has been confirmed that recalcPointerPos is functioning properly, which leads me to believe that the issue lies in the syntax of d3.select(this).attr. Is there a difference in how this type of selection is handled between versions 3 and 4 of d3?

View the fiddle here: https://jsfiddle.net/v1tok1k6/

javascript d3.js svg

Answer 1

Answer №1

The inner return select is utilizing an incorrect scope for selecting the element. The desired scope is that of the outer functions, representing the path element. To resolve this issue, it's recommended to perform the selection at the outer scope for effective 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));
  };
});

Check out the updated fiddle here

Answer 2

The inner return select is utilizing an incorrect scope for selecting the element. The desired scope is that of the outer functions, representing the path element. To resolve this issue, it's recommended to perform the selection at the outer scope for effective 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));
  };
});

Check out the updated fiddle here

There was an issue with d3 version 4: the function this.setAttribute() was not

Answer №1

Similar questions

Limit the focus to the dialog box using JavaScript

Troubleshooting Vercel and Express DELETE request cross-origin resource sharing problem

The jQuery closest selector seems to be malfunctioning when trying to scroll and focus on a specific class

Tips for Drawing Lines and Preserving Them When a Condition is Met

The loading of the module from was hindered due to an invalid MIME type restriction

Verifying Username Availability with Struts2 and AJAX Request

Am I causing my entire React component to re-render needlessly every time the state changes?

Transform a personalized Google map into a visual representation

Replicate and refresh characteristics

Creating responsive data tables in HTML

Calculating the sum of all values in the database

What is the best way to incorporate ng-pluralize into a loop and access the count value?

Create a JavaScript function to calculate a 2-tailed t distribution by adapting an already existing method

Turn only one bracket on the accordion

Enhancing the visual appeal of my PLY file with vibrant hues using three.js

What is the reason skip does not function properly at the start of the aggregation pipeline, yet performs as expected at the conclusion of it?

Place the script tags within the div element

Navigating through the browser history will allow you to view the

I'm confused as to why I am only receiving one object entry in my fetch response instead of the expected list of entries

How can I redirect the page in CodeIgniter after successfully validating?