Как создать d3 svg в vue-cli?

Question

Я новичок в d3 и пытаюсь создать d3 SVG в vue-cli.

браузер не показывает ничего с кодом, как показано ниже, но он работает на HTML без vue.

Может кто-нибудь сказать мне, что случилось с моим кодированием?

Большое спасибо!

<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

В созданном хуке вы сможете получить доступ к реактивным данным, а события активны.Шаблоны и Virtual 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>