如何在 NVD3 中全局更改过渡持续时间？答案

【问题标题】：How to change transition duration globally in NVD3?如何在 NVD3 中全局更改过渡持续时间？
【发布时间】：2014-04-30 15:58:30
【问题描述】：

我想将 NVD3 图表转换为 PDF 文档。这些图表通常显示在浏览器中（我无法为每个图表制作单独的实例以进行打印和显示），我使用 PhantomJS 完成了所有工作，但我有一个问题，我似乎找不到一个好的解决方案到。

所有 NVD3 型号都使用过渡，但只有部分过渡受 transitionDuration 选项影响。由于这些转换，我现在必须在 PhantomJS 中“捕获”屏幕以制作 PDF 之前使用超时，否则会在转换过程中生成这些图表的文档图片。显然我宁愿不必等待。

PhantomJS 使用print 媒体类型来呈现 PDF，因此禁用任何 CSS3 动画（使用媒体查询）非常容易，但我找不到任何关闭 D3 过渡的方法（换句话说 - 强制默认过渡持续时间为 0）。我可以在 JavaScript 中检测到 print 媒体类型，但找不到在 D3/NVD3 中全局关闭动画的好方法......这就是我所拥有的，它并没有真正做太多：

var chart = nv.models.multiBarChart()
    .tooltipContent(tooltip)
    .stacked(true)
    .showControls(false);

var duration = 1000; // default duration
if(window.matchMedia) {
    if(window.matchMedia('print').matches) {
        duration = 1; // duration for print 
    }
}

chart.transitionDuration(duration);

【问题讨论】：

恐怕你得修改 NVD3 源代码才能去掉过渡。
太糟糕了，我希望至少 D3 本身会提供某种方法来禁用动画...

标签： javascript d3.js phantomjs nvd3.js

【解决方案1】：

从 NVD3 1.7.1 开始，您可以使用持续时间选项：

chart.duration(0);

【讨论】：

【解决方案2】：

除了修改 nvd3 源之外，我想不出其他解决方案。如果你替换所有出现的

    transitionDuration = 250

为

    transitionDuration = 0

在 nv.d3.js 中它应该可以工作。

【讨论】：