Black Lives Matter. Please consider donating to Black Girls Code today.

Slider not updating animation

I am following the gapmind example with my own datasets, using 3 frames but with a single trace for each frame.

The data is logging correctly and contains different data for each frame, but the markers don’t update.

Vue.js is not the problem, as I’ve successfully reproduced the gapminder code in Vue.js.

What could be wrong here?

<template>
	<div class="wrapper">
		<div ref="divchart">
		</div>
	</div>
</template>

<script>
var moment = require('moment')

export default {

  name: 'plotlyChart',
  props: ['chartdata'],
  components: {},
  data () {
    return {
    	layout:{
    		colorscale: 'YIGnBu',
    		font: {
    			family: 'Roboto',
    			color: '#EAEAEA'
    		},
    		autosize: true,
    		plot_bgcolor: '#424242',
    		paper_bgcolor: '#424242',
    		xaxis: {
		      range: [0, 600],
		      tickwidth: 0,
		    },
		    yaxis: {
		      autorange: true,
		      title: 'Ranking',
		      tickwidth: 1,
    		  tickcolor: '#EAEAEA',
    		  zeroline: false,
    		  zerolinewidth: 0,
    		  linecolor: '#EAEAEA',
    		  linewidth: 0
		    },

    		updatemenus: [{
    		  x: 0,
    		  y: 0,
    		  bgcolor: '#424242',
    		  bordercolor: 'rgba(255,255,255,0.12)',
    		  xanchor: 'top',
    		  yanchor: 'left',
    		  showactive: false,
    		  direction: 'right',
    		  pad: {t: 60, },
    		}],

    		sliders: [{
    		  pad: {t: 30, l: -60},
    		  x: 0.05,
    		  len: 0.98,
    		  bgcolor: '#ec407a',
    		  activebgcolor: '#ec407a',
    		  bordercolor: 'rgba(0,0,0,0)',
    		  tickwidth: 0,
    		  borderwidth: 0,
    		  currentvalue: {
    		  	visible: true,
    		    // prefix: 'cycle: ',
    		    xanchor: 'right',
    		    font: {color: '#888',size: 20}
    		  },
    		  steps: null
    		}]
    	}
    }
  },
  created(){


  },
  mounted(){
  	// console.log("traces: ", this.traces)
  	// console.log('layout: ', this.layout)
  	// console.log('frames: ', this.frames)
  	// console.log(this.chartdata[0].time_of_ranking.substring(11,30))

  	this.layout.sliders[0].steps = this.chartdata.map(d=>{
  	   return {
  	    method: 'animate',
  	    label: moment(d.time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm'),
  	    args: [[moment(d.time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm')], {
  	    	mode: 'immediate',
  	    	transition: {duration: 500},
  	    	frame: {redraw: false, duration: 500},
  	    }]
  	    }
  	  })

  	Plotly.plot(this.$refs.divchart, {
  	  data: this.traces,
  	  layout: this.layout,
  	  frames: this.frames
  	});

  },
  computed:{
	...Vuex.mapGetters([]),

	frames: function(val){
		var f = this.chartdata.map(d=>{
  		   return {
  		    name: moment(d.time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm'),
  		    data: {
	          x: d.dataframe.map(e=> String(e['001_.key'])),
  	          y: d.dataframe.map(e=> String(e['topsis'])),
  	          id: d.dataframe.map(e=> e['000_name']),
  	          text: d.dataframe.map(e=> e['000_name']),
  	          marker: {
  	          	color: d.dataframe.map(e=> e['topsis']),
  	          }
  		       }
  		    }
  		  })
		return f
	},

	traces: function(val){
		   return [{
		      name: moment(this.chartdata[1].time_of_ranking.substring(11,30), 'YYYY-MM-DD HH.mm.ss').format('HHmm'),    
	          x: this.chartdata[1].dataframe.map(e=> String(e['001_.key'])),
	          y: this.chartdata[1].dataframe.map(e=> String(e['topsis'])),
	          id: this.chartdata[1].dataframe.map(e=> e['000_name']),
	          text: this.chartdata[1].dataframe.map(e=> e['000_name']),
	          mode: 'markers',
	          colorscale: 'YIGnBu',
	          marker: {
	          	colorscale: 'YIGnBu',
	          	borderwidth: 0,
	          	outlinewidth: 0,
	            size: this.chartdata[1].dataframe.map(e=> 3),
	            opacity: 0.6,
	            color: this.chartdata[1].dataframe.map(e=> e['topsis']),
	          } 		    
		    }]
	},

  },
  watch:{

  },
  methods:{

  },
}
</script>

<style lang="stylus" scoped>
@import '../stylus/main'

</style>

They don’t update on render or when interacting with the slider?

When interacting with the slider, the markers don’t move.