CODEWITHSUNDEEP
nvd3.js
Strainy
Strainy

Reputation: 523

How to implement chart animations with the latest NVD3 refactor?

How can I implement an animation for the pie chart when the page loads? I've set the transition, duration and ease methods but it currently just renders without animation.

I'm creating my chart like so...

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;

});

I'd really like the animation to be similar to http://bl.ocks.org/mbostock/4341574 (but maybe only the first half).

Any help would be greatly appreciated!

Strainy

Upvotes: 3

Views: 2514

Answers (1)

Blowsie
Blowsie

Reputation: 40535

Use the duration setting on your chart

More details available on the new documentation page. http://nvd3-community.github.io/nvd3/examples/documentation.html

Upvotes: 1

Related Questions