Vue 2.6集成D3的wheel转盘组件渲染后内容为空问题求助

触发渲染失败的硬伤 #

你的代码完全没有适配Vue组件的运行机制，存在三处直接中断执行的错误：

• 执行时机完全错位：所有D3转盘的绘制逻辑直接写在<script>标签的顶层，脚本加载时就会立刻执行，此时既没有完成D3脚本的下载解析，也没有完成组件DOM的挂载，直接触发运行时报错中断后续逻辑
• 变量拼写错误：你定义的转盘数据数组变量名为data，但后续D3数据绑定、旋转交互函数中全部误写为不存在的data1变量，哪怕时机正确也会因引用未定义变量报错
• 动态加载D3的逻辑没有异步等待：在created钩子中插入D3的script标签后没有监听加载完成事件，脚本处于异步下载过程中时代码就已经开始尝试调用全局d3对象

分步修正步骤 #

1. 调整D3加载逻辑，等待脚本完全可用
   把原created钩子中的动态加载逻辑移到mounted生命周期（此时组件DOM已经渲染完成），并增加脚本加载完成的回调，等D3全局对象可访问后再执行转盘初始化，同时增加重复加载判断避免重复插入脚本：

   methods: {
     initWheel() {
       // 所有原转盘绘制逻辑全部移到这个方法里执行
     }
   },
   mounted() {
     if (window.d3) {
       this.initWheel()
       return
     }
     const myscript = document.createElement("script");
     myscript.src = "https://d3js.org/d3.v3.min.js";
     myscript.onload = () => {
       this.initWheel()
     }
     document.head.appendChild(myscript);
   }
   

2. 替换全局DOM选择方式，避免id冲突
   给模板内的两个容器加ref标识，不要用全局#chart、#question的id选择，避免页面多实例时的id匹配错误，同时让选择逻辑绑定在当前组件实例上：

   <template>
       <div class="wheelclass">
           <div ref="chartEl"></div>
           <div ref="questionEl"></div>
       </div>
   </template>
   

   原代码中d3.select("#chart")替换为d3.select(this.$refs.chartEl)，原代码中为空选择的d3.select("#question h1")替换为先给this.$refs.questionEl追加h1节点再写入内容，避免选择空节点。
3. 修正所有变量名错误
   把代码里所有出现data1的位置全部替换成实际定义的数组变量data，消除未定义变量引用。
4. 适配scoped样式规则
   由于D3动态生成的SVG元素不会被Vue的scoped样式自动添加作用域属性，把转盘相关的通用样式放到非scoped的样式块中，或者给选择器加上组件根类名前缀，避免样式失效。

常见踩坑提醒 #

• 依赖DOM、依赖第三方全局库的逻辑，绝对不要直接写在<script>标签顶层，这类代码的执行时机远早于Vue组件的DOM挂载，必然触发运行错误
• 动态插入第三方脚本时一定要监听onload事件，脚本标签插入DOM只是开始下载流程，不代表对应的全局库已经可以被调用
• 用ref替代全局id选择组件内部的DOM，既能避免页面多实例时的id冲突，也能更精准的定位组件内部元素，和Vue的组件化设计匹配

内容的提问来源于stack exchange，提问作者greg