vue框架使用d3修改svg 内的text文本

<template>
  <div>
    <div id="svg-container" ref="svg"></div>
    <input v-model="message" type="text" placeholder="输入新文本" />
  </div>
</template>
<script>
import wftSvg from "./recording222222.svg";
import * as d3 from "d3"; //在vue文件里面引入d3
export default {
  data() {
    return {
      svgDom: null,
      message: 'Hello, SVG!',
      allDom: null
    };
  },
  created() {
    this.getSvg();
  },
  mounted() {
    // getSvg()
    this.$watch('message', (newVal) => {
      console.log(newVal)
      this.updateSvgText(newVal);
    });
  },
  methods: {
    getSvg() {
      const xhr = new XMLHttpRequest();
      xhr.open("GET", wftSvg, true);
      xhr.send();
      xhr.addEventListener("load", () => {
        const resXML = xhr.responseXML  //  this.stringToXml(xhr.responseXML)
        console.log(resXML.documentElement,'setAttributesetAttributesetAttribute')

        document.getElementById('svg-container').appendChild(resXML.documentElement);

        this.updateSvgText(this.message);
      });
    },
    updateSvgText(text) {
      const svgText = d3.select('#my-text');
      console.log(svgText)
      svgText.text(text);
    }
  }
};
</script>