d3.js - 如何在 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>

标签： d3.jschartsvue.js

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>