javascript - this.canvas.call 不是函数（vue.js + d3.js）

Question

我尝试在 vue 中实现这个地球：https ://codepen.io/Share2U/pen/dyWQoGv ，基于这个问题：d3.js | projection.rotate() 返回值 [NaN, 0, 0]

我得到了地球仪来展示。但是，尝试将 mousevents 添加到画布时，我收到“TypeError：this.canvas.on 不是函数”。

<template lang="html">
  <div class="map" style="width:100vw;height:100vh">
    <canvas ref="globe"></canvas>
  </div>
</template>

<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 {
      angles: { x: -100, 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 : DEG_PER_SEC,
      degPerMs: DEG_PER_SEC / 1000,
      width:null,
      height:null,
      water : {type: 'Sphere'},
      colorWater : 'lightgrey',
      colorLand : 'black',
      colorGraticule : 'grey',
      colorCountry : '#77fc2f',
      land:null,
      currentCountry:null,
      graticule: d3.geoGraticule10(),
      projection: d3.geoOrthographic().precision(0.1),
      path : null,
      v0 : null,
      r0: null,
      q0: null,
      rotationDelay : 3000
    }
  },
  mounted() {


    this.canvas = this.$refs.globe
    this.context = this.canvas.getContext('2d');
    this.path = d3.geoPath(this.projection).context(this.context);

    this.$nextTick(function () {
      this.canvas.call(d3.drag()
        .on('start', this.dragstarted)
        .on('drag', this.dragged)
        .on('end', this.dragended)
      )
    })
    

    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();
    },
    startRotation(delay) {
      this.autorotate.restart(this.rotate, delay || 0)
    },

    stopRotation() {
      this.autorotate.stop()
    },

    dragstarted() {
      this.v0 = this.versor.cartesian(this.projection.invert(d3.mouse(this)))
      this.r0 = this.projection.rotate()
      this.q0 = this.versor(this.r0)
      this.stopRotation()
    },

    dragged() {
      var v1 = this.versor.cartesian(this.projection.rotate(this.r0).invert(d3.mouse(this)))
      var q1 = this.versor.multiply(this.q0, this.versor.delta(this.v0, v1))
      var r1 = this.versor.rotation(q1)
      this.projection.rotate(r1)
      this.render()
    },

    dragended() {
      this.startRotation(this.rotationDelay)
    }
  },
}
</script>

代码也可以在这里找到： https ://codesandbox.io/s/globe-issus-forked-gr834

感谢任何提示！

标签： javascriptvue.jsd3.js