5

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?

Miron
  • 1,007
  • 2
  • 17
  • 31

3 Answers3

7

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!
}
Pablo Lozano
  • 10,122
  • 2
  • 38
  • 59
7

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

David Gomez
  • 2,762
  • 2
  • 18
  • 28
1

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()...

Tawab Wakil
  • 1,737
  • 18
  • 33