Question

我正在使用angularjs-nvd3-directives创建一些饼图和堆积条形图，并想知道如何更改转换持续时间甚至类型，但持续时间是我主要想要调整的持续时间。

这是我的代码：

<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>

transitionduration仅影响图表的初始加载，但是当数据更改并重新绘制图表时，条形图或饼图切片过快地转换为新值。如果可能的话，我希望能够减慢速度并改变转换类型。它目前默认从左上角转换到右下角 - 这对于慢速图表加载很好，但过渡看起来很糟糕。

我尝试了delay="500"，但似乎没有做任何事情。我在这里错过了什么吗？

Answer 1

会从DOM中选择并添加持续时间吗？

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

Answer 2

有一个名为＆＃39; duration＆＃39;的财产。

$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);
                    }
                }
            }
        };

在您的选项对象中，提供持续时间对象。这应该工作。请查看plnkr。

如果您有任何问题，请告诉我。

如何更改angularjs-nvd3-directives图表的转换

2 个答案: