能不能基于vue3 给出缩放D3.js 视图 svg 的代码

当使用 Vue 3 结合 D3.js 来实现可视化时，经常需要对 SVG 视图进行缩放操作。下面是一个基于 Vue 3 和 D3.js 的 SVG 视图缩放示例代码：

<template>
  <div ref="container">
    <svg :width="width" :height="height" ref="svg">
      <g :transform="`translate(${margin.left}, ${margin.top})`">
        <circle cx="50" cy="50" r="50" fill="red"/>
      </g>
    </svg>
  </div>
</template>

<script>
import * as d3 from 'd3';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const container = ref(null);
    const svg = ref(null);
    const width = 500;
    const height = 500;
    const margin = { top: 20, right: 20, bottom: 20, left: 20 };
    const zoom = d3.zoom().on('zoom', zoomed);

    function zoomed() {
      const transform = d3.event.transform;
      d3.select(svg.value)
        .select('g')
        .attr('transform', transform);
    }

    onMounted(() => {
      d3.select(container.value)
        .call(zoom)
        .call(zoom.transform, d3.zoomIdentity.translate(margin.left, margin.top));
    });

    return {
      container,
      svg,
      width,
      height,
      margin,
    };
  },
};
</script>

在这个示例代码中，我们使用了 Vue 3 的 `ref` 函数来声明了一个指向容器元素和 SVG 元素的引用 `container` 和 `svg`，并且定义了 SVG 视图的大小 `width` 和 `height`，以及 SVG 视图内部的边距 `margin`。

在 `setup` 函数中，我们使用 D3.js 的 `zoom` 函数来创建一个缩放操作，并将其绑定到容器元素上。在 `zoomed` 函数中，我们使用当前缩放的变换矩阵来更新 SVG 视图中的 `g` 元素的变换属性。

最后，在 `onMounted` 钩子函数中，我们使用 D3.js 的 `select` 函数来选中容器元素，并将缩放操作应用到其中。同时，我们使用 `transform` 函数将 SVG 视图平移初始的 `margin` 边距大小。

在模板中，我们使用插值绑定 `:width` 和 `:height` 来设置 SVG 视图的大小，使用 `:transform` 绑定来设置 `g` 元素的变换属性。最后，我们在 `g` 元素中添加了一个圆形元素来测试缩放效果。