javascriptanimationd3.jsplottable

Pie chart animation when data changes in plottable.js


I am trying to animate a pie chart when data changes. Below is a code snippet

var piePlot = new Plottable.Plots.Pie()
            .addDataset(dataset)
            .outerRadius(function() { return Math.floor(piePlot.width()/10) + 40 })
            .innerRadius(function() { return Math.floor(piePlot.width()/10) })
            .sectorValue(function(d) { return d.y; })
            .attr("fill", function(d) { return d.x; }, colorScale)
            .attr("opacity",0.8)
            .animated(true)
            .animator(Plottable.Plots.Animator.MAIN,new Plottable.Animators.Easing().easingMode("quad").stepDuration(3500));

My confusion is the animation works great for charts such as line chart and area chart but doesnot work for other charts like rectangle chart, pie chart, scatter chart etc. Why is it so ? Do we need to make a custom animation function or what ? If yes can you please guide me...

Like I said this works perfectly

var linePlot = new Plottable.Plots.Line()
        .addDataset(dataset)
        .x(function(d) { return d.x; }, xScale)
        .y(function(d) { return d.y; }, yScale)
        .attr("stroke","#FA8116")
        .animated(true)
        .animator(Plottable.Plots.Animator.MAIN,new Plottable.Animators.Easing().easingMode("quad").stepDuration(3500));

Solution

  • Apparently it seems that there is no implementation of animation support for pie and rectangle chart.