vue结合D3.js并实现D3.js官网的IndentedTree的效果，数着显示

首先，你需要安装D3.js和Vue.js的依赖。在Vue.js的组件中，你可以通过引入D3.js的库来创建Indented Tree的效果。

在模板中，你可以创建一个div元素，用于渲染D3.js的Indented Tree。你可以使用Vue.js的生命周期函数，在组件加载后调用D3.js的API来创建Indented Tree。

下面是代码示例：

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

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

export default {
  mounted() {
    this.createTree();
  },
  methods: {
    createTree() {
      // 获取数据
      const data = {
        name: 'Root',
        children: [
          {
            name: 'Child 1',
            children: [
              { name: 'Grandchild 1' },
              { name: 'Grandchild 2' },
            ],
          },
          {
            name: 'Child 2',
            children: [
              { name: 'Grandchild 3' },
              { name: 'Grandchild 4' },
            ],
          },
        ],
      };

      // 创建Indented Tree
      const margin = { top: 20, right: 90, bottom: 30, left: 90 };
      const width = 960 - margin.left - margin.right;
      const height = 500 - margin.top - margin.bottom;

      const svg = d3.select(this.$refs.tree)
                  .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(data);
      const treeLayout = d3.tree().size([height, width]);
      const treeData = treeLayout(root);

      const link = svg.selectAll('.link')
                    .data(treeData.descendants().slice(1))
                    .enter()
                    .append('path')
                    .attr('class', 'link')
                    .attr('d', d => {
                      return `M ${d.y},${d.x}
                              C ${(d.y + d.parent.y) / 2},${d.x}
                                ${(d.y + d.parent.y) / 2},${d.parent.x}
                                ${d.parent.y},${d.parent.x}`;
                    });

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

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

      node.append('text')
          .attr('dx', d => (d.children ? -8 : 8))
          .attr('dy', 3)
          .attr('text-anchor', d => (d.children ? 'end' : 'start'))
          .text(d => d.data.name);
    },
  },
};
</script>

在上面的代码中，我们首先定义了一些参数，如边距、宽度和高度。然后，我们使用D3.js的API来创建了一个SVG元素，并将其附加到组件的DOM元素上。接下来，我们使用D3.js的tree布局来计算树的坐标，并创建链接和节点元素，最后将它们附加到SVG元素上。

这是一个简单的实现D3.js官网Indented Tree效果的例子，你可以根据自己的需求进行修改和扩展。