D3.js 力导向图：实现整体图表拖拽与节点独立拖拽的协同管理

const zoomBehavior = d3
  .zoom()
  .scaleExtent([0.2, 100]) // 设置允许的最小和最大缩放比例
  .on('zoom', (event) => {
    // 当发生缩放或平移事件时，更新group元素的transform属性
    // event.transform 包含了当前的平移 (x, y) 和缩放 (k) 信息
    group.attr('transform', event.transform);
  });

const svg = d3
  .select(container)
  .append('svg')
  .attr('viewBox', [-width / 2, -height / 2, width, height])
  .call(zoomBehavior as any); // 将zoom行为应用于SVG元素

function dragstarted(event: DragEvent, d: any) {
  // 阻止zoom事件在节点拖拽时被触发
  event.sourceEvent.stopPropagation();
  d3.select(this).classed('fixing', true);
  // ... 其他逻辑 ...
}

function dragged(event: DragEvent, d: any) {
  d.fx = event.x; // 更新节点的固定x坐标
  d.fy = event.y; // 更新节点的固定y坐标
  simulation.alpha(1).restart(); // 重启力模拟，使节点移动到新位置
  // ... 其他逻辑 ...
}

function dragended(event: DragEvent, d: DNode) {
  d3.select(this).classed('fixed', true);
  // ... 其他逻辑 ...
}

const node = group
  .append('g')
  .selectAll<SVGCircleElement, { x: number; y: number }>('g')
  .data(nodes)
  .join('g')
  .classed('node', true)
  // ... 其他节点样式和属性 ...
  .call(
    d3
      .drag()
      .on('start', dragstarted)
      .on('drag', dragged as any)
      .on('end', dragended as any) as any
  )
  .on('click', click as any);

const zoomBehavior = d3
  .zoom()
  .scaleExtent([0.2, 100])
  .on('zoom', (event) => {
    group.attr('transform', event.transform);
  })
  // 禁用滚轮缩放事件
  .filter((event) => event.type !== 'wheel');
  // 或者更精确地禁用：
  // .on('zoom.wheel', null);

d3.selectAll('.zoom-button').on('click', function () {
    // @ts-ignore
    if (this && this.id === 'zoom-in') {
      svg.transition().delay(100).duration(500).call(zoomBehavior.scaleBy as any, 1.2); // 放大
    }
    // @ts-ignore
    if (this.id === 'zoom-out') {
      svg.transition().delay(100).duration(500).call(zoomBehavior.scaleBy as any, 0.8); // 缩小
    }
    // @ts-ignore
    if (this.id === 'zoom-init') {
      svg.transition().delay(100).duration(500).call(zoomBehavior.scaleTo as any, 0.7); // 返回初始缩放
    }
});

import * as d3 from 'd3'; // 假设D3已正确导入

// ... (数据初始化、力模拟 setup 等省略，与原代码保持一致) ...

const containerRect = container.getBoundingClientRect();
const height = containerRect.height;
const width = containerRect.width;

// 节点拖拽事件处理函数
function dragstarted(event: DragEvent, d: any) {
  event.sourceEvent.stopPropagation(); // 阻止事件冒泡到SVG，避免触发整体拖拽
  d3.select(this).classed('fixing', true);
  // ... 其他UI状态更新 ...
}

function dragged(event: DragEvent, d: any) {
  d.fx = event.x;
  d.fy = event.y;
  simulation.alpha(1).restart(); // 重启力模拟
  // ... 其他UI状态更新 ...
}

function dragended(event: DragEvent, d: any) {
  d3.select(this).classed('fixed', true);
  // ... 其他逻辑 ...
}

function click(event: TouchEvent, d: any) {
  delete d.fx;
  delete d.fy;
  d3.select(this).classed('fixed', false).classed('fixing', false);
  simulation.alpha(1).restart();
}

// 初始化力模拟 (与原代码相同)
const simulation = d3
  .forceSimulation(nodes as any[])
  .force('link', d3.forceLink(links).id((d: any) => d.id))
  .force('charge', d3.forceManyBody().strength(isMobile ? -600 : -1300))
  .force('collision', d3.forceCollide().radius(isMobile ? 5 : 20))
  .force('x', d3.forceX())
  .force('y', d3.forceY());

// 清空容器 (与原代码相同)
if (container.children) {
  d3.select(container).selectAll('*').remove();
}

// 定义D3 Zoom行为
const zoomBehavior = d3
  .zoom()
  .scaleExtent([0.2, 100]) // 设置缩放范围
  .on('zoom', (event) => {
    // 当发生缩放或平移时，更新group元素的transform
    group.attr('transform', event.transform);
  })
  .filter((event) => event.type !== 'wheel'); // 禁用滚轮缩放

// 创建SVG元素并应用Zoom行为
const svg = d3
  .select(container)
  .append('svg')
  .attr('viewBox', [-width / 2, -height / 2, width, height])
  .call(zoomBehavior as any); // 将zoom行为应用于SVG元素

// 创建group元素，用于包裹所有节点和链接
const group = svg.append('g'); // group元素不再绑定d3.drag()

// 绘制链接 (与原代码相同)
const link = group
  .append('g')
  .attr('stroke', '#1e1e1e')
  .attr('stroke-opacity', 0.2)
  .selectAll('line')
  .data(links)
  .join('line');

// 绘制节点并应用节点拖拽行为
const node = group
  .append('g')