Technology

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:


       var lineData = [{'x':1, 'y':5}, {'x':20, 'y': 20},
                       {'x':40, 'y':10}, {'x':60, 'y':40},
                       {'x':80, 'y':5}, {'x':100, 'y': 60}];

       var lineFunction = d3.svg.line()
                          .x(function(d){return d.x;})
                          .y(function(d){return d.y;})
                          .interpolate('linear');

       var svgContainer1 = d3.select('body').append('svg')
                           .attr('width', 200)
                           .attr('height', 200);

       var lineGraph = svgContainer1.append('path')
                       .attr('d', lineFunction(lineData))
                       .attr('stroke', 'blue')
                       .attr('stroke-width', 2)
                       .attr('fill', 'none');
   

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:

D3 SVG

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:

<script src="https://d3js.org/d3.v4.min.js"></script>

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:


      var jsonCircles = [
                         {'x_axis': 30, 'y_axis': 0, 'radius': 20, 'color': 'green'},
                         {'x_axis': 70, 'y_axis': 20, 'radius':20 , 'color':'purple'},
                         {'x_axis': 110, 'y_axis': 100, 'radius': 20, 'color':'red'}
                        ];
      var svgContainer2 = d3.select('body').append('svg')
                          .attr('width', 200)
                          .attr('height', 200);
      
var circles2 = svgContainer2.selectAll('circle') .data(jsonCircles) .enter() .append('circle'); 
      var circle2Attributes = circles2 .attr('cx', function(d){return d.x_axis;}) 
                     .attr('cy', function(d){return d.y_axis;}) 
                     .attr('r', function(d){return d.radius;}) 
                     .style('fill', function(d){return d.color;}); 
      var lineData = [{'x':1, 'y':5}, 
                      {'x':20, 'y': 20}, 
                      {'x':40, 'y':10}, 
                      {'x':60, 'y':40}, 
                      {'x':80, 'y':5}, 
                      {'x':100, 'y': 60}]; 

     var lineFunction = d3.line() 
                         .x(function(d){return d.x;}) 
                         .y(function(d){return d.y;}) 
                         .curve(d3.curveLinear); 

     var svgContainer1 = d3.select('body').append('svg') 
                          .attr('width', 200) 
                          .attr('height', 200); 

     var lineGraph = svgContainer1.append('path') 
                       .attr('d', lineFunction(lineData)) 
                       .attr('stroke', 'blue') 
                       .attr('stroke-width', 2) 
                       .attr('fill', 'none');

I hope this will help you out.

4 thoughts on “D3 – Resolving Uncaught TypeError:

    • Thanks hedge Trimmer. 🙂

  • magnificent issues altogether, you just gained a emblem new reader. What may you recommend about your publish that you made some days ago? Any certain?

Comments are closed.