2

我正在使用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"，但这似乎没有任何作用。我在这里错过了什么吗？

4

2 回答 2

1

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

d3.select("#chart").duration(300);
于 2015-02-28T13:11:48.017 回答
0

有一个名为“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);
                    }
                }
            }
        };

在您的选项对象中，提供持续时间对象。那应该行得通。请看一下plnkr。

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

于 2016-04-22T06:38:29.937 回答