Question

我创建了一个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
        };
    });
}

Answer 1

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

chart.duration(0);

Answer 2

我使用了transitionDuration：-1，它适用于stackedAreaChart。

修改

这有助于在附加图表数据时取消转换，而不是重新调整尺寸问题，请查看以下评论。

Answer 3

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

chart.transitionDuration(0);

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

如何删除NVD3图表调整大小/更新延迟

3 个答案: