Javascript plottable.js折线图中的自定义动画

当数据更新时，我尝试在plottable.js中使用自定义动画。 下面是我的代码：-

<script type="text/javascript">

    var xScale = new Plottable.Scales.Category();
    var yScale = new Plottable.Scales.Linear().domain([0,30]);

    var xAxis = new Plottable.Axes.Category(xScale, "bottom");
    var yAxis = new Plottable.Axes.Numeric(yScale, "left");

    var dataset;

    var data;

    function createChart() {
        data = [];

        for(var i=0; i<10; i++) {
            data.push({x:"Data" + (i + 1),y:Math.abs(Math.random() * 10)});
        }

        dataset = new Plottable.Dataset(data);
        makeChart();
    }

    function updateChart() {
        data = [];

        for(var i=0; i<10; i++) {
            data.push({x:"Data" + (i + 1),y:Math.abs(Math.random() * 10)});
        }

        dataset.data(data);
    }

    function makeChart() {
        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("test",new Plottable.Animators.Easing().easingMode("bounce"));

        var label_y = new Plottable.Components.AxisLabel("Parameter 2", -90);
        var label_x = new Plottable.Components.AxisLabel("Parameter 1", 0);

        var chart = new Plottable.Components.Table([
        [label_y, yAxis, linePlot],
        [null, null, xAxis],
        [null, null, label_x]
        ]);

        chart.renderTo("svg#lineChart");

        // Responsive Layout
        window.addEventListener("resize", function() {
            chart.redraw();
        });
    }   

    $(document).ready(function() {
        createChart();
        setInterval(function(d) {
            updateChart();
        },5000);
    });

</script>

我不知道我在哪里，因为我是plottable的新手，你们能帮我一下吗？还有没有办法在plottable中使用基于d3的动画？？如果是，您可以提供代码片段吗

---

Thanx预先

绘图

s通常有两个

动画师

s:

MAIN

和

RESET

。您需要指定要更改

绘图

上的主要

动画师

：

plot.animator（Plottable.Plots.animator.MAIN，
新绘图仪.Animators.Easing（）.easingMode（“反弹”）；

我不明白你在问什么。我运行了你上面的代码，这行动画效果很好。你看到的动画是默认的。。。我希望它有一个反弹效果或任何其他除了默认的哦，我现在明白了。您是对的，看起来它忽略了您传入的任何选项，只是运行default.thanx来获得答案。。。但是，如果我希望动画从上一个状态开始而不是从一开始就开始，那该怎么办？为什么同样的动画不适用于矩形图表

var barPlot=new Plottable.Plots.rectangle（）

.addDataset（dataset）

.x（0，xScale）

.x2（函数（d）{return d.y；}，xScale）

.y（function（d）{return d.x；}，yScale）

.attr（“fill”，“585087”）

.attr（“stroke width”，3.5）

.attr（“stroke”，“fff”）

.attr（“imposity”，0.6）

（正确）

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("test",new Plottable.Animators.Easing().easingMode("bounce"));