Question

我尝试制作曲面图并添加滑块来为其设置动画。我是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>

我们如何使情节动画流畅

0 个答案: