如何在ForceDirectedTree图表中为气泡添加自定义事件

// 引入D3.js库
<script src="https://d3js.org/d3.v7.min.js"></script>

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

// 创建ForceDirectedTree图表
var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) { return d.id; }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

// 加载数据
d3.json("data.json").then(function(graph) {
  // 创建节点和链接
  var link = svg.append("g")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", function(d) { return color(d.group); })
    .call(drag(simulation));

  // 添加点击事件
  node.on("click", function(d) {
    // 在控制台打印节点信息
    console.log(d);
    // 在此处编写自定义的事件处理逻辑
    // 例如，可以弹出一个信息框显示节点的详细信息
  });

  // 启动模拟器
  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(graph.links);

  // 更新节点和链接的位置
  function ticked() {
    link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

    node
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  }
});

// 拖拽函数
function drag(simulation) {
  function dragstarted(event, d) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(event, d) {
    d.fx = event.x;
    d.fy = event.y;
  }

  function dragended(event, d) {
    if (!event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

  return d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended);
}