如何在 vue-cli 中创建 d3 svg？

Question

我是 d3 新手，正在尝试在 vue-cli 中创建 d3 SVG。

浏览器没有显示如下代码，但它可以在没有 vue 的 HTML 上运行。

谁能告诉我我的编码有什么问题？

非常感谢！

<template>
  <div>
   <div id='chart' ></div>
  </div>
</template>
<script>
  import * as d3 from 'd3'

  export default {
    name: 'priceChart',
    data() {
      return {
     }
    },
  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(){
   this.createSvg();
   }
 }
</script>

Answer 1

DOM 元素在created 方法中不可用，你应该把它放在mounted 中

在 created 钩子中，您将能够访问反应数据和 事件是活跃的。模板和虚拟 DOM 尚未安装 或渲染。

<template>
  <div>
   <div id='chart' ></div>
  </div>
</template>
<script>
  import * as d3 from 'd3'

  export default {
    name: 'priceChart',
    data() {
      return {
     }
    },
  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')
    }
   },
 mounted(){
   this.createSvg();
   }
 }
</script>