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

中

在创建的钩子中，您将能够访问被动数据和事件是活跃的。模板和虚拟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>

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

1 个答案: