novus / nvd3

A reusable charting library written in d3.js
http://nvd3.org/
Other
7.22k stars 2.15k forks source link

Feature request: disable transitions #1945

Open daixtrose opened 7 years ago

daixtrose commented 7 years ago

We use ng2-nvd3 in an Angular2 app and any kind of animation leads to crazy effects. The data update frequency interferes with the animation, especially the ones of labels. In our case labels are always in the same range, but values change at high rate.

Since nvd3 throws away the svg and draws it again, any animation during draw is definitely not what we want in case data changes 10 times per second.

In src/models/bulletChart.js 129ff we had to change

// Transition the updating ticks to the new scale, x1.
            var tickUpdate = d3.transition(tick)
                .transition()
                .duration(bullet.duration())
                .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
                .style('opacity', 1); 

into

 // Immediately update ticks to the new scale, x1.
            var tickUpdate = tick
                .attr('transform', function(d) { return 'translate(' + x1(d) + ',0)' })
                .style('opacity', 1); 

to get rid of pumping labels.

We would like to propose a possibility to disable all animations globally and/or a possibility to set it per plot.

liquidpele commented 7 years ago

the chart.duration(0) property should apply a 0-second time to any animations in a chart... if that's not working then it's a bug.

https://nvd3-community.github.io/nvd3/examples/documentation.html

olivermue commented 7 years ago

That did the trick. You can close this issue.