audio - d3 selectAll 不是 Vue 和 AudioContext 的函数

Question

我有一个带有 html5 音频代码的 vue.js 应用程序(用于跟踪 AudioContext)。有趣的是它可以在没有 Vue 的情况下工作(使用完全相同的代码)

简体vue代码

// import stuff

let player = new Vue({
  data: function() {
    return {
      audio: null,
      analyser: null,
      frequencyData: null,
      svg: null,
      currentTrack: data
    }
  },

  methods: {
    initAllTracks: function() {
      // ...
      this.initPlayer();
    },

    initPlayer: function() {
      this.audio = new Audio('audio_source_link');
      this.audio.crossOrigin = 'anonymous';

      this.startPlaying();
    },

    startPlaying: function() {
      // ...
      this.initAudioContext();
    },

    initAudioContext: function() {
      let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      let audioSrc = audioCtx.createMediaElementSource(this.audio);
      this.analyser = audioCtx.createAnalyser();

      audioSrc.connect(this.analyser);
      audioSrc.connect(audioCtx.destination);

      this.audio.play();

      this.frequencyData = new Uint8Array(5);
      this.svg = d3.select('.app').append('svg');

      this.renderSVG();
    },

    renderSVG: function() {
      requestAnimationFrame(this.renderSVG);

      console.log('FIRST: ' , this.frequencyData);

      this.analyser.smoothingTimeConstant = 1 - (4 / 100);
      this.analyser.getByteFrequencyData(this.frequencyData);

      console.log('SECOND: ' , this.frequencyData);

      var radiusScale = d3.scale.linear().domain([0, d3.max(this.frequencyData)]).range([0, 1200 / 2]);
      var circles = this.svg.selectAll('circle').data(this.frequencyData);

      circles.enter().append('circle');

      circles
        .attr({
          // ...
        });

      circles.exit().remove();
    }
  }
});

我调用 initAllTracks()应用程序启动。

但是，在代码行 var circles = this.svg.selectAll('circle').data(this.frequencyData);我变成了错误TypeError: this.svg.selectAll is not a function .

console.log 给了我一个正确的 Uint8Array .然后我尝试删除this.frequencyData (可能来自 vue.js 的绑定(bind)存在问题)并将其设为全局。但是什么都没有改变...

这又是一件有趣的事情:如果我在没有 Vue.js 的情况下编写所有这些代码(只是在开始时定义所有变量并写下函数)。这有效...

//编辑:

我把 renderSVG函数 INTO initAudioContext功能，它的工作原理..为什么？

Answer 1

问题在这里:

this.svg = d3.select('.app').append('svg');

不要给 d3 实例设置 vue 数据，因为 vue 数据会改变 d3 实例原型(prototype)。

尝试将其分配给独立变量。