如何在vuejs中使用D3缩放图表？

import * as d3 from 'd3';

<template>
  <div id="chart"></div>
</template>

mounted() {
  this.createChart();
},
methods: {
  createChart() {
    // 获取容器元素
    const container = d3.select('#chart');
    
    // 创建D3图表，这里以创建一个简单的矩形图表为例
    container.append('rect')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 50)
      .attr('height', 50)
      .style('fill', 'blue');
  }
}

mounted() {
  this.createChart();
  this.addZoom();
},
methods: {
  createChart() {
    // 创建D3图表，这里以创建一个简单的矩形图表为例
    // ...
  },
  addZoom() {
    // 获取容器元素
    const container = d3.select('#chart');
    
    // 创建缩放函数
    const zoom = d3.zoom()
      .on('zoom', () => {
        // 缩放时调用的函数
        container.attr('transform', d3.event.transform);
      });
    
    // 将缩放函数绑定到容器元素上
    container.call(zoom);
  }
}

addZoom() {
  // ...
  
  // 设置缩放范围
  zoom.scaleExtent([0.5, 2]);
}