How to change the transition for angularjs-nvd3-directives charts

Question

I am using angularjs-nvd3-directives to create some pie charts and stacked bar charts and was wondering how to change the transition duration or even the type, but the duration is the one I'm primarily looking to adjust.

Here is my code:

<nvd3-multi-bar-horizontal-chart 
                    data="stackedData"
                    id="stackedExample2"
                    showvalues="true"
                    valueformat="valueFormatFunction()"
                    showlegend="true"
                    tooltips="true"
                    showlabels="true"
                    stacked="true"
                    color="colourFunction()"
                    legendcolor="colourFunction()"
                    showxaxis="true"
                    showyaxis="true"
                    x="xFunctionBar()"
                    showcontrols="false"
                    interactive="true"
                    margin="{left:100}"
                    transitionduration="1000">
                    <svg></svg>
                </nvd3-multi-bar-horizontal-chart>

The transitionduration only affects the initial load of the graph, but when the data changes and the chart is re-drawn the bars or pie slices transition to the new values too quickly. I would like to be able to slow this down and alter the transition type if possible. It currently defaults to transitioning from top left to bottom right - which is fine for a slow chart load but the transitions look terrible.

I have tried delay="500" but that doesn't seem to do anything. Am I missing something here?

score 1 · Answer 1 · answered Feb 28 '15 at 13:11

1

Would selecting it from the DOM and adding the duration work?

d3.select("#chart").duration(300);

answered Feb 28 '15 at 13:11

fin

1,275
4
18
34

score 0 · Answer 2 · answered Apr 22 '16 at 06:38

There is a property named 'duration'.

$scope.options = {
            chart: {
                type: 'multiBarHorizontalChart',
                height: 450,
                x: function(d){return d.label;},
                y: function(d){return d.value;},
                showControls: true,
                showValues: true,
                duration: 500,
                xAxis: {
                    showMaxMin: false
                },
                yAxis: {
                    axisLabel: 'Values',
                    tickFormat: function(d){
                        return d3.format(',.2f')(d);
                    }
                }
            }
        };

In your options object, provide the duration object. That should work. Please have a look at the plnkr.

Do let me know in case you have any issue.

How to change the transition for angularjs-nvd3-directives charts

2 Answers2