Vue3+d3放缩svg图控制放缩范围重置svg图的大小

import * as d3 from 'd3';

let zoomAction: any = ref(null);
let content = '<g xmlns=\"http://www.w3.org/2000/svg\"...'
let svg: any = d3
  .select('#svgId')
  .html('')
  .append('svg')
  .attr('width', '100%')
  .attr('height', '100%');

  // 创建一个缩放行为
zoomAction.value = d3
.zoom()
.scaleExtent([1, 100])
.on('zoom', ({ transform }) => {
  svg.select('g').attr('transform', transform);
});
svg = svg.call(zoomAction.value);
svg.append('g').html('content');

/**
 * 获取svg图的缩放比例
 * @param svg svg元素
 * @returns
 */
export function getZoomState(svg: HTMLElement) {
  if (!svg) {
    return null;
  } else {
    let transform = d3.zoomTransform(svg); // 获取transform的属性
    return transform;
  }
}

/**
 * 设置svg图的平移及缩放比例
 * @param svg svg元素
 * @param zoom d3的缩放行为
 * @param transform 缩放的比例
 * @returns
 */
export function setZoomState(svg: any, zoom: any, transform?: any) {
  if (!transform) {
    transform = d3.zoomIdentity;
  }
  let { x, y, k } = transform;
  // zoomIdentity可以创建一个新的'transform':{x:0,y:0,k:1}，并通过transform.translate(x,y), transform.scale(k)对其进行更改
  let newTransform = d3.zoomIdentity.translate(x, y).scale(k);
  svg.call(zoom.transform, newTransform); // 放缩与平移操作，都需要作用在<svg>上
}

  // 恢复svg初始大小
function refreshSize() {
  let svgWrap: any = d3.select('#svgId');
  if (svgWrap && zoomAction.value) {
    let svg = svgWrap.select('svg');
    setZoomState(svg, zoomAction.value);
  }
}