D3 布局集成 - 将 D3.js 力模拟与关系图结合使用

D3.js 布局集成

功能概述

本示例演示 D3.js 力导向布局算法与关系图的集成。D3 强大的物理模拟计算节点位置，然后应用于关系图节点以进行渲染和交互。

核心特性实现

D3 模拟设置

import { forceSimulation, forceLink, forceManyBody, forceCenter } from 'd3-force';

const initD3Simulation = (nodes: RGNode[], lines: RGLine[]) => {
    const simulation = forceSimulation(nodes as any)
        .force('link', forceLink(lines as any).id((d: any) => d.id).distance(100))
        .force('charge', forceManyBody().strength(-300))
        .force('center', forceCenter(canvasWidth / 2, canvasHeight / 2));

    simulation.on('tick', () => {
        nodes.forEach(node => {
            graphInstance.updateNode(node.id, {
                x: node.x,
                y: node.y
            });
        });
    });

    return simulation;
};

应用 D3 位置

const applyD3Layout = () => {
    const nodes = graphInstance.getNodes();
    const lines = graphInstance.getLines();

    const simulation = initD3Simulation(nodes, lines);

    // 让模拟稳定
    setTimeout(() => {
        simulation.stop();
    }, 3000);
};

创意使用场景

复杂网络：D3 的高级力算法处理复杂拓扑。

基于物理的布局：真实的物理模拟。

自定义力规则：实现特定于领域的布局规则。

过渡动画：平滑的布局过渡。

混合布局：结合 D3 与关系图布局。