限制D3有向图的边界内节点移动

// 定义边界范围
const boundary = {
  xMin: 0,
  yMin: 0,
  xMax: 500,
  yMax: 500
};

// 创建一个D3有向图
const svg = d3.select("svg");
const width = +svg.attr("width");
const height = +svg.attr("height");
const simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

// 加载有向图数据
d3.json("graph.json").then(graph => {
  // 创建节点和边
  const link = svg.append("g")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke", "#999")
    .attr("stroke-opacity", 0.6);

  const node = svg.append("g")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", "#000")
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

  // 监听节点移动事件
  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(d) {
    // 判断节点位置是否超出边界
    if (d.x < boundary.xMin) {
      d.x = boundary.xMin;
    } else if (d.x > boundary.xMax) {
      d.x = boundary.xMax;
    }
    if (d.y < boundary.yMin) {
      d.y = boundary.yMin;
    } else if (d.y > boundary.yMax) {
      d.y = boundary.yMax;
    }
    d.fx = d.x;
    d.fy = d.y;
  }

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

  // 更新节点和边的位置
  simulation.nodes(graph.nodes).on("tick", () => {
    link
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);

    node
      .attr("cx", d => d.x)
      .attr("cy", d => d.y);
  });

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