1. 确认代码中是否正确绑定了节点和数据，以及节点的状态和数据的状态是否匹配。
2. 通过添加代码逻辑，在点击节点时对节点状态进行判断，并对节点的子节点进行操作，实现节点的折叠和展开。 例如以下代码，通过将节点的状态保存在数据中，在节点点击事件中根据状态进行判断并对子节点进行操作，实现节点的折叠和展开。

HTML 部分：

TS 部分：

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss']
})
export class TreeComponent implements OnInit {
  @ViewChild('svg_ele') svgEle: ElementRef;

  constructor() { }

  ngOnInit(): void {
    const data = {
      "name": "root",
      "children": [
        { "name": "child1", "children": [] },
        { "name": "child2", "children": [
          { "name": "child3", "children": [] }
        ] },
        { "name": "child4", "children": [] },
        { "name": "child5", "children": [] },
        { "name": "child6", "children": [
          { "name": "child7", "children": [] },
          { "name": "child8", "children": [] },
          { "name": "child9", "children": [] }
        ] },
      ]
    };

    const svg = d3.select(this.svgEle.nativeElement);
    const width = +svg.attr('width');
    const height = +svg.attr('height');
    const g = svg.append('g')
      .attr('transform', `translate(20,20)`);

    const tree = d3.tree()
      .size([height-40, width-40]) // 高度和宽度不要超过svg的大小
      .nodeSize([100,