Как мы можем сделать сюжетную анимацию плавной - PullRequest
Новая
       64

Как мы можем сделать сюжетную анимацию плавной

0 голосов
/ 09 мая 2018

Я пытаюсь создать диаграмму поверхности и добавить ползунок, чтобы оживить его. Я новичок в Plotly и попытался скопировать параметры перехода, методы анимации, параметры кадров из этого примера: https://plot.ly/javascript/gapminder-example/, но он все еще переходит из одного состояния в другое без перехода.

Тогда: возможно ли иметь плавные переходы на любом графике или нет?

вот мой код: 

<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<div id="myDiv"> </div>

<script > 
var traces = [{"name":"Asia", "type":"surface","z":[["28.801", "55.23","43.077","30.015", "62.485"],["28.801", "55.23","43.077","30.015", "62.485"],["779.4453145", "1601.056136","2449.008185","3520.610273", "5911.315053"], ["8425333", "1282697","9279525","4232095", "17876956"]],"id":["Afghanistan","Albania","Algeria","Angola", "Argentina"],"text":["Afghanistan","Albania","Algeria","Angola", "Argentina"]},//"mode":"markers","marker":{"size":["8425333"],"sizemode":"area","sizeref":200000}},];

var layout = {"xaxis":{"title":"Life Expectancy","range":[30,85]},
      "yaxis":{"title":"GDP per Capita","type":"log"},
      "hovermode": "text",
      "updatemenus":[{"x":0,"y":0,"yanchor":"top","xanchor":"left","showactive":false,"direction":"left","type":"buttons","pad":{"t":87,"r":10},
      "buttons":[{"method":"animate",
                  "args":[null,{"mode":"immediate","fromcurrent":true,"transition":{"duration":300},"frame":{"duration":500,"redraw":false}}],
                  "label":"Play"},
                {"method":"animate",
                  "args":[[null],{"mode":"immediate","transition":{"duration":0},"frame":{"duration":0,"redraw":false}}],
                  "label":"Pause"}]}],
      "sliders":[{"pad":{"l":130,"t":55},
                  "currentvalue":{"visible":true,
                    "prefix":"Year:",
                    "xanchor":"right",
                    "font":{"size":20,"color":"#666"}},
                  "steps":[{"method":"animate","label":"1952","args":[["1952"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]},
                          {"method":"animate","label":"1957","args":[["1957"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]},
                          {"method":"animate","label":"1962","args":[["1962"],{"mode":"immediate","transition":{"duration":300},"frame":{"duration":300,"redraw":false}}]}
                          ]}]};


var frames = [
{"name":"1952","data":[{"z":[["28.801","55.23","500.077","30.015","62.485"],["28.801","55.23","500.077","30.015","62.485"],["779.4453145","1601.056136","2449.008185","3520.610273","5911.315053"],["8333","5419","8050","42095","6890"]], "id":["Afghanistan","Albania","Algeria","Angola","Argentina"],"text":["Afghanistan","Albania","Algeria","Angola","Argentina"]}]},
{"name":"1957","data":[{"z":[["30.332","59.28","450.685","41.999","64.399"],["30.332","59.28","450.685","41.999","64.399"],["820.8530296","1942.284244","3013.976023","9827.940465","6856.856212"],["9244","1951","6413","61361","7506"]], "id":["Afghanistan","Albania","Algeria","Angola","Argentina"],"text":["Afghanistan","Albania","Algeria","Angola","Argentina"]}]},
{"name":"1962","data":[{"z":[["70.332","100.28","400.685","51.999","64.399"],["70.332","100.28","400.685","51.999","64.399"],["920.8530296","2342.284244","6013.976023","10827.940465","6856.856212"],["4094","2670","5096","1361","8065"]], "id":["Afghanistan","Albania","Algeria","Angola","Argentina"],"text":["Afghanistan","Albania","Algeria","Angola","Argentina"]}]},
];

Plotly.newPlot("myDiv", {data: traces, layout: layout, frames: frames});

</script>
...