如何在Vue-CLI中创建D3 SVG？代码无显示问题求助

算力阿峰

2026-5-28

问题原因分析

你遇到的问题核心是Vue生命周期钩子的时机不对：在created钩子执行时，你的组件DOM还没有被挂载到页面上，这时候d3.select('#chart')根本找不到对应的元素，自然无法生成SVG。而纯HTML环境中代码是在DOM完全加载后运行的，所以能正常工作。

解决方案

方案1：切换到`mounted`钩子调用方法

Vue的mounted钩子会在组件DOM完全挂载到页面后执行，这时候#chart元素已经存在，可以被D3正确选中：

<template>
  <div>
    <div id='chart'></div>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  name: 'priceChart',
  methods:{
    createSvg(){
      const svg = d3.select('#chart').append('svg')
        .attr('width',500)
        .attr('height',400);
      svg.append('rect')
        .attr('x',0)
        .attr('y',0)
        .attr('width',500)
        .attr('height',400)
        .style('fill','red')
    }
  },
  // 把created换成mounted
  mounted(){
    this.createSvg();
  }
}
</script>

方案2：使用Vue的`ref`获取DOM元素（更推荐）

用Vue的ref来获取DOM元素比全局id选择器更可靠，能避免页面中id重复的问题：

<template>
  <div>
    <!-- 给元素添加ref属性 -->
    <div ref='chart'></div>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  name: 'priceChart',
  methods:{
    createSvg(){
      // 通过this.$refs获取DOM元素
      const svg = d3.select(this.$refs.chart).append('svg')
        .attr('width',500)
        .attr('height',400);
      svg.append('rect')
        .attr('x',0)
        .attr('y',0)
        .attr('width',500)
        .attr('height',400)
        .style('fill','red')
    }
  },
  mounted(){
    this.createSvg();
  }
}
</script>

补充说明

Vue生命周期中：