d3.js - nvd3.js中不存在transitionDuration函数

我正在学习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不存在。如果我删除该行，一切正常。

问题:为什么此功能不存在？我在某个地方错了吗？还是需要加载其他库？

最佳答案

在NVD3的lineChart中，函数.transitionDuration()的 guest 外观很短。在撰写本文时，它已经不复存在，但继续引起困惑，这主要是因为页面的Simple Line Chart示例仍然引用了它。但是，NVD3.js页面上的lineChart示例已损坏，不应再使用。有关示例的最新列表，网站建议克隆GitHub Repository。

函数.transitionDuration()由commit d57a84 于2013年8月引入，仅五个月后就由commit e177cae 弃用。从它的GitHub历史可以看出，它在后来的某个时候变成了forwarding to chart.duration() :

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

该函数最终由commit 92ec4bc 删除，因此不再可用。作为直接替换，您可以调用lineChart的.duration()函数。

或者，可以通过调用传递的chart.options()作为选项对象的属性来配置图表。

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

更新2015年11月9日

具有讽刺意味的是，即使是来自GitHub存储库的新示例也存在缺陷。它在用于配置的选项对象中使用了错误的属性名称duration。这只会添加属性transitionDuration，因为它是未知的，不会造成任何损害，也不会引发任何错误，但也不会产生任何影响。需要将其更改为transitionDuration以获得所需的效果。

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

更新2016年8月19日

GitHub存储库的lineChart示例中的上述缺陷已由commit a683c97于2016年5月21日修复。