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 中有一个相当短暂的客串出现。它在撰写本文时已经消失，但继续引起混乱，主要是因为该页面的 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.

函数 .transitionDuration() 是在提交 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() 之后的某个时间引入的：

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

该功能最终被提交删除 92ec4bc and is therefore no longer available. As a direct replacement you may call function .duration() of lineChart。

或者，可以通过调用 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 日由提交 a683c97.

修复

Answer 2

为碰巧发现此问题且示例代码错误的任何其他人添加此答案——NVD3.org 上的示例已过时，该站点目前建议克隆 Github 存储库以用于最新的例子。对于折线图，最新示例在这里：https://github.com/novus/nvd3/blob/master/examples/lineChart.html

nvd3.js 中不存在 transitionDuration 函数

transitionDuration function does not exist in nvd3.js

d3.js

nvd3.js