transitionDuration函数在nvd3.js中不存在 [英] transitionDuration function does not exist in nvd3.js

问题描述

我正在学习 nvd3.js 以绘制图表。从网站的示例中，我选择以下简单代码来测试：

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

但是当我运行代码时，说明 transitionDuration 不存在。如果我删除那行一切都很好。

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?

推荐答案

函数 .transitionDuration （）在NVD3的lineChart中有一个相当短暂的客人外观。在撰写本文时已经过去了，但仍会造成混乱，主要是因为网页的 简单折线图 示例仍然引用它。但是，NVD3.js页面上的lineChart示例已损坏，不应再使用。有关示例的最新列表，网站建议克隆 GitHub信息库。

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.

函数 .transitionDuration（）是由commit d57a84 ，并且已通过提交 e177cae 从它的GitHub历史可以看出，它已经一段时间后转发到 chart.duration（） ：

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(_);       
};      

函数最后被commit 92ec4bc ，因此已无法使用。作为直接替换，您可以调用 .duration（） #lineChartrel =nofollow> lineChart 。

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.

或者，可以通过调用 chart.options c>作为options对象的属性传递 duration 。

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
    })
;

2015年11月9日更新

讽刺的是，即使是来自GitHub仓库的新例子也是有缺陷的。它在用于配置的选项对象中使用错误的属性名称 transitionDuration 。这将只添加属性 transitionDuration ，这将没有任何伤害，并且不会抛出任何错误，因为它是未知的，但也没有影响。需要更改为 duration 才能达到预期的效果。

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
    })
;

更新2016年8月19日

上面提到的来自GitHub存储库的lineChart示例的缺点已修复自2016年5月21日commit a683c97 。

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

这篇关于transitionDuration函数在nvd3.js中不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！