D3 – Resolving Uncaught TypeError:



While practicing on the Sebastian Gutierrez’s D3 and Language R course on DashingD3js.com (BTW a great resource to learn integrating both of these languages) I was stuck at a problem where the console constantly kept giving me the following error:

Uncaught TypeError: Cannot read property ‘line’ of undefined.

The code that I’m talking about looks something like this:

Although, I followed each and every step accurately but still the error keeps popping up and the output wasn’t generating which should have been something like this:


The only result was a blank screen and the console displayed the above error.

So what went wrong?

I decided to search it up on the internet and figured out that the problem lies with the version of D3 I was using.

In the “Head” section, I used the following line of code to callback D3:

This clearly states that I was using version 4 of D3. So what does the version 4 of D3 has to do with the working of the code?

Well, the line, d3.svg.line() would work only till version 3 and for the fourth version, it has been replaced by d3.line().

The complete transformation from version 3 to version 4 of D3 can be seen from this comprehensive documentation that can be found here: d3/CHANGES.md at master · d3/d3 · GitHub

So all I had to do was to replace d3.svg.line with d3.line.

This should have worked but when I executed the code, still what I could see was a blank white screen. So there must be something wrong as well.

Again, I went to the console to see what secrets it now holds for me and this time, it gave me the following error message:

Uncaught TypeError: d3.line(…).x(…).y(…).interpolate is not a function

Now, this error surely looks more complex than the first one. But if we take a close look, it says, “Interpolate” is not a function.

This line of code looks something like this: .interpolate('linear');

If you are logical, it’s not difficult to deduce that even the interpolate function is not supported by version 4 anymore. So what is the alternative?

The document that I shared showed that I can replace the interpolate function with .curve(d3.curveLinear); and when I applied these changes, Voila…! the code worked.

So if you guys are following the same course that I did and stuck at the same place. Then here is the complete and updated code for you guys:

I hope this will help you out.

4 thoughts on “D3 – Resolving Uncaught TypeError:

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up to our newsletter!

This site uses Akismet to reduce spam. Learn how your comment data is processed.