d3.js - 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 仍然引用它。但是，NVD3.js 页面上的 lineChart 示例已损坏，不应再使用。有关示例的最新列表，该站点建议克隆 GitHub Repository .

函数.transitionDuration()由提交 d57a84 引入在 2013 年 8 月并被提交 e177cae 弃用仅仅五个月后。从它的GitHub历史可以看出，它一直是forwarding to chart.duration() 一段时间后:

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

该函数最终被提交 92ec4bc 删除因此不再可用。作为直接替代，您可以调用函数 .duration()的 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 修复。 .