为什么d3 bar chard无法在浏览器中显示示例？

Question

我想制作一个d3条形图。但是浏览器中没有显示任何内容，我收到错误消息'错误id挂载挂钩：“TypeError：无法读取原型'0'未定义”'

我似乎无法解决。谁能告诉我编码有什么问题？

非常感谢！

我在下面试过

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

 export default {
   name: 'priceChart',
   data() {
   return {
     price_open: 0,
     price_min: 1,
     price_max: 2,
     price_close: 3,
     w: 500,
     h: 400,
     paddingLeft: 30,
     paddingRight: 30,
     paddingTop: 20,
     paddingBottom: 20,
     volumeData:[10,20,30,40,33,24,12,5]

    }
  },

 methods: {

    createSvg() {
      const svg = d3.select('#chart')
       .append('svg')
       .attr('width', this.w)
       .attr('height', this.h);
      let xScale = d3.scaleBand()
       .domain(d3.range(this.volumeData.length))
       .rangeRound([0, this.w - this.paddingLeft - this.paddingRight]);

      let yScale = d3.scaleLinear()
       .domain([0, d3.max(this.volumeData)])
       .range([this.h - this.paddingTop - this.paddingBottom, 0])

      let xAxis = d3.axisBottom(xScale);
      let yAxis = d3.axisLeft(yScale);

      let rectPadding = 4;
      let rects = svg.selectAll('.MyRect')
        .data(this.volumeData)
        .enter()
        .append('rect')
        .attr('class', 'MyRect')
        .attr('transform', 'translate(' + this.paddingLeft + ',' + 
      this.paddingTop + ')')
        .attr('x', (d, i) => (xScale(i) + rectPadding) / 2)
        .attr('y', (d, i) => yScale(d))
        .attr('width',xScale.rangeRound()-this.rectPadding)
        .attr('height',d=>this.height-this.paddingTop- 
      this.paddingBottom-yScale(d))
        .attr('fill','red')
       }
      },
    mounted() {
      this.createSvg();
     }
    }