如何使用最新的NVD3重构实现图表动画?

时间:2014-05-14 04:09:35

标签: nvd3.js

如何在页面加载时为饼图实现动画?我设置了转换,持续时间和缓动方法,但它目前只是渲染而没有动画。

我正在创建我的图表......

nv.addGraph(function() {

//Set Simple Chart Options
var chart = nv.models.pieChart()
    .x(function(d) { return d.title })
    .y(function(d) { return d.value })
    .showLabels(options_obj.show_labels)
    .showLegend(options_obj.legend)
    .width(options_obj.width)
    .height(options_obj.height)
    .color(colorRange)
    .tooltips(options_obj.tooltips)
    .donut(options_obj.doughnut);

//Set chart width/height and initialize animation
d3.select('#chart')
    .datum(row_data)
    .transition().duration(350).ease('linear')
    .attr('width', options_obj.width)
    .attr('height', options_obj.height)
    .call(chart);

return chart;

});

我真的很喜欢动画类似于http://bl.ocks.org/mbostock/4341574(但可能只是前半部分)。

非常感谢任何帮助!

Strainy

1 个答案:

答案 0 :(得分:1)

使用图表上的duration设置

新文档页面上提供了更多详细信息。 http://nvd3-community.github.io/nvd3/examples/documentation.html