transitionDuration function does not exist in nvd3.js

Question

I'm learning nvd3.js to draw charts. From a sample from the site, I pick following simple code to test:

chart = nv.models.lineChart()
                      .margin({ left: 100, right: 100 })  //Adjust chart margins to give the x-axis some breathing room.
                      .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                      .transitionDuration(350)  //how fast do you want the lines to transition?
                      .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                      .showYAxis(true)        //Show the y-axis
                      .showXAxis(true)        //Show the x-axis

But when I'm running the code it says that transitionDuration doesn't exist. If I remove that line everything works fine.

Question: Why this function doesn't exist? Am I wrong somewhere or is there any additional library required to be loaded?

Thaddeusthaddus

Answer 1

The function .transitionDuration() had a rather short-lived guest appearance within NVD3's lineChart. It is gone by the time of writing, but continues to cause confusion, mostly because the page's Simple Line Chart example still refers to it. However, the lineChart example on the NVD3.js page is broken and should no longer be used. For an up-to-date list of examples the site recommends cloning the GitHub Repository.

The function .transitionDuration() was introduced by commit d57a84 in August 2013 and was deprecated by commit e177cae just five months later. As can be seen from its GitHub history, it has been forwarding to chart.duration() some time afterwards:

chart.transitionDuration = function(_) {        
    nv.deprecated('lineChart.transitionDuration');      
    return chart.duration(_);       
};      

The function was finally removed by commit 92ec4bc and is therefore no longer available. As a direct replacement you may call function .duration() of lineChart.

Alternatively, the chart may be configured by calling chart.options() passing in the duration as a property of the options object.

chart = nv.models.lineChart()
    .options({
        duration: 500
    })
;

Update Nov 9, 2015

Ironically, even the new example from the GitHub repository is flawed. It uses the wrong property name transitionDuration in the options object used for configuration. This will just add the property transitionDuration which will do no harm and throw no errors because it is unknown, but will have no effect either. It needs to be changed to duration to achieve the desired effect.

chart = nv.models.lineChart()
    .options({
        transitionDuration: 300,    // This should be duration: 300
        useInteractiveGuideline: true
    })
;

Update Aug 19, 2016

The above mentioned shortcoming in the lineChart example from the GitHub repository was fixed as of May 21, 2016 by commit a683c97.

Cinerator

Answer 2

Adding this answer for anyone else who happens to stumble upon this issue with bad sample code -- the examples on NVD3.org are outdated, and the site currently suggests to clone the Github repository for the latest examples. For a line chart, the latest example is here: https://github.com/novus/nvd3/blob/master/examples/lineChart.html

Resplendent

As stated in @Cinerator 's answer, the transitionDuration option is deprecated. Use duration instead. e.g. duration: 300 not transitionDuration: 300. – Karisakarissa