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示例仍然引用它。但是，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删除，因此不再可用。作为直接替换，您可以调用lineChart的函数.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日由提交a683c97修复。

Answer 2

为其他碰巧遇到错误示例代码的问题添加此答案 - NVD3.org上的示例已过时，该网站目前建议克隆Github存储库以获取最新示例。对于折线图，最新的示例如下：https://github.com/novus/nvd3/blob/master/examples/lineChart.html

nvd3.js中不存在transitionDuration函数

2 个答案: