vue3 实现d3思维导图代码 并且自定义无线嵌套

好的，让我来回答你的问题。

首先，我们需要先安装 D3.js 和 Vue.js。

在 Vue3 中，我们可以使用 Composition API 来编写代码。下面是一个示例代码，可以实现 D3 思维导图并自定义无线嵌套。

<template>
  <div ref="container"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  setup() {
    const containerRef = ref(null);

    onMounted(() => {
      const container = containerRef.value;

      const treeData = {
        name: 'Parent',
        children: [
          {
            name: 'Child 1',
            children: [
              {
                name: 'Grandchild 1',
              },
              {
                name: 'Grandchild 2',
              },
            ],
          },
          {
            name: 'Child 2',
            children: [
              {
                name: 'Grandchild 3',
              },
              {
                name: 'Grandchild 4',
              },
            ],
          },
        ],
      };

      const margin = { top: 10, right: 120, bottom: 10, left: 40 };
      const width = 960 - margin.right - margin.left;
      const height = 500 - margin.top - margin.bottom;

      const svg = d3
        .select(container)
        .append('svg')
        .attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`);

      const root = d3.hierarchy(treeData);
      const treeLayout = d3.tree().size([height, width]);

      treeLayout(root);

      const link = svg
        .selectAll('.link')
        .data(root.links())
        .enter()
        .append('path')
        .attr('class', 'link')
        .attr('d', d3.linkHorizontal().x((d) => d.y).y((d) => d.x));

      const node = svg
        .selectAll('.node')
        .data(root.descendants())
        .enter()
        .append('g')
        .attr('class', 'node')
        .attr('transform', (d) => `translate(${d.y},${d.x})`);

      node.append('circle').attr('r', 4);

      node
        .append('text')
        .attr('dy', '.31em')
        .attr('x', (d) => (d.children ? -6 : 6))
        .style('text-anchor', (d) => (d.children ? 'end' : 'start'))
        .text((d) => d.data.name);
    });

    return {
      containerRef,
    };
  },
};
</script>

在上面的代码中，我们使用了 D3 的 tree 布局来生成思维导图。我们也可以使用其他的布局来生成不同的图形。

同时，我们可以根据需求自定义嵌套的深度，只需要在树形数据中设置相应的 children 属性即可。

希望这个回答可以帮到你，如果还有其他问题，请随时提出。