nvd3.js中不存在transitionDuration函数

Question

我正在学习nvd3.js来绘制图表.从网站上的示例中,我选择以下简单代码进行测试:

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

但是,当我运行代码时,它表示transitionDuration不存在.如果我删除该行一切正常.

问题:为什么这个功能不存在？我在某处错了还是需要加载任何额外的库？

Answer 1

该功能.transitionDuration()在NVD3的lineChart中具有相当短暂的客串外观.它在写作的时候已经消失了,但是继续引起混淆,主要是因为页面的简单折线图示例仍然引用它.但是,NVD3.js页面上的lineChart示例已中断,不应再使用.对于最新的示例列表,该站点建议克隆GitHub存储库.

该功能.transitionDuration()于d57a842013年8月由提交引入,e177cae仅在五个月之后被提交弃用.从它的GitHub历史可以看出,它已经转发到chart.duration()一段时间后:

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

该函数最终被提交删除,92ec4bc因此不再可用.作为直接替代你可以叫功能.duration()的线型图.

或者,可以通过调用chart.options()传入duration选项对象的属性来配置图表.

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

2015年11月9日更新

具有讽刺意味的是,即使GitHub存储库中的新示例也存在缺陷.它transitionDuration在用于配置的选项对象中使用了错误的属性名称.这只会添加transitionDuration不会造成伤害的属性并且不会抛出任何错误,因为它是未知的,但也不会产生任何影响.需要将其更改duration为达到预期效果.

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

2016年8月19日更新

来自GitHub存储库的lineChart示例中的上述缺点在2016年5月21日由commit a683c97修复.