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

import * as d3 from 'd3';
import React, { useRef, useEffect } from 'react';

// 假设 DNode, DLink, jsonFyStory 等类型和函数已定义
// 假设 container 是一个 useRef 获取的 DOM 元素

interface DNode {
  id: string;
  name: string;
  class: string;
  definition?: string;
  summary?: string;
  image?: string;
  fx?: number;
  fy?: number;
  x?: number;
  y?: number;
}

interface DLink {
  source: string | DNode;
  target: string | DNode;
}

// 假设这是你的React组件或初始化函数
const ForceGraph = ({ selectedVariable, stories, isMobile, setDisplayCta, setDisplayNodeDescription, setNodeData }) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const container = containerRef.current;
    const data = { /* your processed data */ }; // jsonFyStory(selectedVariable, stories)
    const links = data.links.map((d: any) => ({ ...d }));
    const nodes = data.nodes.map((d: any) => ({ ...d }));
    const containerRect = container.getBoundingClientRect();
    const height = containerRect.height;
    const width = containerRect.width;

    // 清空容器
    d3.select(container).selectAll('*').remove();

    // D3力导向图仿真
    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());

    // 创建SVG容器
    const svg = d3
      .select(container)
      .append('svg')
      .attr('viewBox', [-width / 2, -height / 2, width, height]);

    // 创建一个G元素来包裹所有图表内容，它将被zoom行为变换
    const group = svg.append('g');

    // 定义节点拖拽行为
    function dragstarted(event: any, d: DNode) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
      d3.select(this).classed('fixing', true);
      setDisplayCta(false);
      setDisplayNodeDescription(false);
      setNodeData({});
    }

    function dragged(event: any, d: DNode) {
      d.fx = event.x;
      d.fy = event.y;
      simulation.alpha(1).restart(); // 拖拽时立即重启仿真
      setDisplayNodeDescription(true);
      if (d.class === 'story-node') setDisplayCta(true);
      setNodeData({
        name: d.name as string,
        class: d.class as string,
        definition: d.definition as string,
        summary: d.summary as string,
      });
    }

    function dragended(event: any, d: DNode) {
      if (!event.active) simulation.alphaTarget(0);
      d3.select(this).classed('fixed', true); // 拖拽结束后固定节点
    }

    function click(event: any, d: DNode) {
      delete d.fx;
      delete d.fy;
      d3.select(this).classed('fixed', false).classed('fixing', false);
      simulation.alpha(1).restart(); // 释放节点并重启仿真
    }

    // 绘制连线
    const link = group
      .append('g')
      .attr('stroke', '#1e1e1e')
      .attr('stroke-opacity', 0.2)
      .selectAll('line')
      .data(links)
      .join('line');

    // 绘制节点
    const node = group
      .append('g')
      .selectAll<SVGCircleElement, DNode>('g')
      .data(nodes)
      .join('g')
      .classed('node', true)
      .classed('fixed', (d: any) => d.fx !== undefined)
      .attr('class', (d: any) => d.class as string)
      .call(
        d3
          .drag<SVGGElement, DNode>()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended)
      )
      .on('click', click);

    // 节点样式（此处省略详细代码，与原问题一致）
    // ...

    // 定义整体图表的缩放和平移行为
    const zoomBehavior = d3
      .zoom()
      .scaleExtent([0.2, 100]) // 缩放范围
      .on('zoom', (event) => {
        group.attr('transform', event.transform); // 应用变换到group元素
      });

    // 将zoom行为绑定到svg元素
    svg.call(zoomBehavior as any);

    // 可选：禁用鼠标滚轮缩放，防止与页面滚动冲突
    // svg.on('wheel.zoom', null);

    // 仿真tick事件，更新节点和连线位置
    simulation.on('tick', () => {
      link
        .attr('x1', (d: any) => d.source.x)
        .attr('y1', (d: any) => d.source.y)
        .attr('x2', (d: any) => d.target.x)
        .attr('y2', (d: any) => d.target.y);
      node.attr('transform', (d: any) => `translate(${d.x},${d.y})`);
    });

    // 初始化缩放或过渡到初始状态
    // zoomBehavior.scaleTo(svg, 0.7); // 初始缩放比例

    // 缩放按钮交互 (此处省略详细代码，与原问题一致)
    // ...

  }, [selectedVariable, stories, isMobile, setDisplayCta, setDisplayNodeDescription, setNodeData]);

  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
};

export default ForceGraph;