d3.js | projection.rotate() return value [NaN, 0, 0] - vue.js

Question

I want to rotate the globe canvas using projection.rotate() but it return value [NaN, 0, 0].
<template lang="html">
<div class="map" style="width:100vw;height:100vh">
<canvas id="globe"></canvas>
</div>
</template>
<script lang="js">
import * as d3 from "d3";
import * as topojson from "topojson-client";
export default {
name: 'vue',
data() {
return {
angles: { x: -20, y: 40, z: 0 },
canvas: null,
context: null,
countries:null,
countryList:null,
autorotate:null,
lastTime : d3.now(),
now:null,
diff:null,
roation:null,
scaleFactor: 0.6,
degPerSec : 6,
degPerMs: this.degPerSec / 1000,
width:null,
height:null,
water : {type: 'Sphere'},
colorWater : '#0099cf',
colorLand : '#77fc2f',
colorGraticule : '#0099cf',
colorCountry : '#77fc2f',
land:null,
currentCountry:null,
graticule: d3.geoGraticule10(),
projection: d3.geoOrthographic().precision(0.1),
path : null,
}
},
mounted() {
this.canvas = document.getElementById('globe');
this.context = this.canvas.getContext('2d');
this.path = d3.geoPath(this.projection).context(this.context);
this.loadData((world, cList)=> {
this.land = topojson.feature(world, world.objects.land);
this.countries = topojson.feature(world, world.objects.countries);
this.countryList = cList;
window.addEventListener('resize', this.scale);
this.scale();
this.autorotate = d3.timer(this.rotate);
});
},
methods: {
loadData(cb) {
d3.json('https://unpkg.com/world-atlas#1/world/110m.json').then(function(world) {
d3.tsv('https://gist.githubusercontent.com/mbostock/4090846/raw/07e73f3c2d21558489604a0bc434b3a5cf41a867/world-country-names.tsv').then( function(countries) {
cb(world, countries)
})
})
},
rotate(elapsed) {
this.now = d3.now();
this.diff = this.now - this.lastTime;
if (elapsed < 300) { //this.diff !== elapsed
let rotation = this.projection.rotate();
console.log(rotation);
rotation[0] += this.diff * this.degPerMs;
this.projection.rotate(rotation);
this.render();
}
this.lastTime = this.now;
},
render() {
this.context.clearRect(0, 0, this.width, this.height);
this.fill(this.water, this.colorWater)
this.stroke(this.graticule, this.colorGraticule)
this.fill(this.land, this.colorLand)
if (this.currentCountry) {
this.fill(this.currentCountry, this.colorCountry)
}
},
fill(obj, color) {
this.context.beginPath()
this.path(obj)
this.context.fillStyle = color
this.context.fill()
},
stroke(obj, color) {
this.context.beginPath()
this.path(obj)
this.context.strokeStyle = color
this.context.stroke()
},
scale() {
this.width = document.querySelector(".map").clientWidth;
this.height = document.querySelector(".map").clientHeight;
this.canvas.setAttribute('width', this.width);
this.canvas.setAttribute('height', this.height);
this.projection
.scale((this.scaleFactor * Math.min(this.width, this.height)) / 2)
.translate([this.width / 2, this.height / 2])
this.render();
}
},
}
</script>
you can check my issue here: https://codesandbox.io/s/globe-issus-q2s1s
example rotate demo: https://codepen.io/Share2U/pen/dyWQoGv
Thank you for your help.

Answer 1

The issue lies in the following line:
degPerMs: this.degPerSec / 1000,
this.degPerSec is not available because you can't access other data properties inside data. Therefore rotation[0] += this.diff * this.degPerMs; is returning NaN.
To fix this you can set a variable before exporting the module.
E.g.:
<script lang="js">
import * as d3 from "d3";
import * as topojson from "topojson-client";
const DEG_PER_SEC = 6;
export default {
name: 'vue',
data() {
return {
...
degPerMs: DEG_PER_SEC / 1000,
...
}
}
}
</script>