Пользовательская анимация в линейной диаграмме plottable.js

Question

Я пытаюсь использовать пользовательскую анимацию в 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> 

Я хочу, чтобы анимировать lineplot кроме умолчанию, и я сделал это: -

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")); 

не понимаю, от которой я нахожусь в правильной и так как я новый к plottable может вы, ребята, помочь мне, также есть способ использовать анимацию на основе d3 с plottable ?? Если да вы можете предоставить фрагмент кода

Thanx заранее

Answer 1

Plot s обычно имеют два Animator S: MAIN и RESET. Необходимо указать, что вы хотите изменить основной Animator на Plot:

plot.animator(Plottable.Plots.Animator.MAIN, 
    new Plottable.Animators.Easing().easingMode("bounce"));