如何在D3中更新树图

// 1. 数据准备
const data = {
  name: "Root",
  children: [
    {
      name: "Node 1",
      children: [
        { name: "Leaf 1" },
        { name: "Leaf 2" }
      ]
    },
    {
      name: "Node 2",
      children: [
        { name: "Leaf 3" },
        { name: "Leaf 4" }
      ]
    }
  ]
};

// 2. 创建画布
const width = 500;
const height = 500;
const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

// 3. 创建树布局
const treeLayout = d3.tree()
  .size([width, height]);

// 4. 创建节点和链接
const rootNode = d3.hierarchy(data);
const treeData = treeLayout(rootNode);

const links = treeData.links();
const nodes = treeData.descendants();

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

const nodeSelection = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("cx", d => d.y)
  .attr("cy", d => d.x)
  .attr("r", 5);

// 5. 更新节点和链接
// 假设数据发生变化，更新节点和链接的位置和样式
// 更新节点位置
nodeSelection.transition()
  .duration(500)
  .attr("cx", d => d.y)
  .attr("cy", d => d.x);

// 更新链接路径
linkSelection.transition()
  .duration(500)
  .attr("d", d3.linkHorizontal()
    .x(d => d.y)
    .y(d => d.x));

// 6. 添加交互
nodeSelection.on("click", (event, d) => {
  console.log("Clicked:", d.data.name);
});