向d3树图v4添加切换函数

// 导入D3.js库和其他依赖
import * as d3 from 'd3';

// 准备树形数据结构（示例数据）
const data = {
  name: 'Root',
  children: [
    { name: 'Node 1' },
    { name: 'Node 2', children: [{ name: 'Node 2.1' }, { name: 'Node 2.2' }] },
    { name: 'Node 3' },
  ],
};

// 创建SVG容器
const svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);

// 定义树图布局
const treeLayout = d3.tree().size([400, 400]);

// 绘制树图
const root = d3.hierarchy(data);
const treeData = treeLayout(root);

// 定义节点和连接线样式
const link = svg.selectAll('.link')
  .data(treeData.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(treeData.descendants())
  .enter()
  .append('circle')
  .attr('class', 'node')
  .attr('cx', d => d.y)
  .attr('cy', d => d.x)
  .attr('r', 4);

// 定义切换函数
function toggleNode(node) {
  if (node.children) {
    node._children = node.children;
    node.children = null;
  } else {
    node.children = node._children;
    node._children = null;
  }
  // 重新绘制树图
  updateTree();
}

// 更新树图
function updateTree() {
  const nodes = treeData.descendants();
  const links = treeData.links();

  link.data(links)
    .transition()
    .attr('d', d3.linkHorizontal().x(d => d.y).y(d => d.x));

  node.data(nodes)
    .transition()
    .attr('cx', d => d.y)
    .attr('cy', d => d.x)
    .attr('r', 4);

  // 添加点击事件
  node.on('click', toggleNode);
}

// 初始绘制树图
updateTree();