CODEWITHSUNDEEP
javascriptjqueryd3.js
Miron
Miron

Reputation: 1067

Uncaught TypeError: .. is not a function in javascript

I am trying to use d3.js to draw line chart.

Javascript

function lineChart(){
    ...
}

function update(){
    ...
    var lineChart = lineChart()
        .x(d3.scale.linear().domain([2011, 2014]))
        .y(d3.scale.linear().domain([0, 1000000]));
    ...
}

But the console says that Uncaught TypeError: lineChart is not a function.
How to fix this?

Upvotes: 5

Views: 20696

Answers (3)

Tawab Wakil
Tawab Wakil

Reputation: 2313

Another solution, if you don't want to change your variable name, is to qualify the method name with this to disambiguate it from the variable name that precedes it:

var lineChart = this.lineChart()...

Upvotes: 1

David Gomez
David Gomez

Reputation: 2772

You are shadowing your function.

This happens when you declare another variable/function with the same name of an upper one. What you should do is to give another name to the second one declaration just like @andlrc says in his comment.

var lineChartResult = lineChart()...

You can learn more about shadowing in here: Setting & Shadowing Properties

Upvotes: 7

Pablo Lozano
Pablo Lozano

Reputation: 10342

If you declare a variable with the name of an existing function, that function is no longer available within that context (is shadowed by the variable). Change the name of the variable to avoid that naming collision.

This code is equivalente to yours, maybe you can see what is happening:

function lineChart() {...} //function declared

function update() {
    var lineChart; // variable created, its value is undefined
    lineChart=lineChart() // linechart is not a function, is an undefined value!
}

Upvotes: 7

Related Questions