如何消除 NVD3 图表调整大小/更新延迟答案

【问题标题】：How to remove NVD3 chart resize/update delay如何消除 NVD3 图表调整大小/更新延迟
【发布时间】：2014-01-11 20:42:23
【问题描述】：

我创建了一个 NVD3 multiBarChart 并将它放置在一个 jQuery 可调整大小的容器中。调整图表大小时，每次渲染都会产生与首次绘制图表时相同的延迟：从左到右交错的条形延迟绘制。第一次绘制图表时这看起来很酷，但在调整图表大小时会很麻烦。我已经尝试过 nv.d3.css，将每次延迟减少到 0ms 无济于事。尚未检查 NVD3 JS，希望不需要。

小提琴： http://jsfiddle.net/a5Fnj/10/

var container = $("#mycontainer");
$(container[0]).resizable();
var svg = d3.select(container[0]).append("svg");

nv.addGraph(function () {
    var chart = nv.models.multiBarChart();

    chart.xAxis.tickFormat(d3.format(',f'));
    chart.yAxis.tickFormat(d3.format(',.1f'));

    d3.select(container[0]).select("svg")
        .datum(exampleData())
        .transition().duration(0).call(chart);

    nv.utils.windowResize(chart.update);

    this.stackedbar = chart;
});

function exampleData() {
    return stream_layers(3, 10 + Math.random() * 100, .1).map(function (data, i) {
        return {
            key: 'Stream' + i,
            values: data
        };
    });
}

【问题讨论】：

标签： d3.js resize delay updates nvd3.js

【解决方案1】：

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

chart.duration(0);

【讨论】：

感谢您的提醒。我更新了小提琴，它似乎可以工作。调整大小已损坏，但单击堆叠/分组和流选择使其立即绘制而不是动画。 jsfiddle.net/a5Fnj/12
后续：那个fiddle使用的是1.7.0，因为CDN没有1.7.1

【解决方案2】：

我使用了适用于stackedAreaChart 的transitionDuration: -1。

编辑

这有助于消除附加图表数据时的过渡，而不是调整大小的问题，请检查下面的 cmets。

【讨论】：

我已经尝试过了，并结合了传入-1的不同变体。调整 jQuery 容器的大小会继续导致缓慢的重绘。这是一个更新的小提琴：jsfiddle.net/a5Fnj/10
我的回答应该更具体。将数据附加到图表时，我在重新绘制时遇到了问题，而不是重新调整大小。我认为值得检查它是否也解决了您的问题，但您似乎已经走上了这条路，没有运气。
这可能不是您想要的解决方案，但您是否尝试过延迟更新直到完成调整大小？像这样：jsfiddle.net/qL5vyr39
这是个好主意。虽然它在某些方面有所改进，但它仍然不是一个很好的用户体验。它可能与其他方法结合使用。真希望 NVD3 团队尊重 duration() 调用。

【解决方案3】：

在最新版本（来自github）中，可以设置.transitionDuration()：

chart.transitionDuration(0);

编辑：即使这样，一些转换/持续时间在 NVD3 源中也是硬编码的。摆脱这些的唯一方法是修改源代码。

【讨论】：

我从您的链接中获取了最新的 nv.d3.min.js，并在 chart.yAxis 调用之后直接添加了 chart.transitionDuration(0)。调整大小继续呈现延迟。
对，好像只控制了部分过渡。其余的恐怕是硬编码的，所以你必须修改源代码。
我遇到了同样的问题。我可以很好地破解源代码 - 如果我能找到需要更改的适当行。 @LarsKotthoff 你能给个提示吗？我不想开始用 transition(1) 替换所有 .transition( 调用，直到它起作用：-/
恐怕你必须这样做。
Hm 现在这样做了，但没有改变行为 - 我会花一点时间来找到相应的计时器/超时功能。还是谢谢！