Three.js 力导向图：让数据跳起优雅的华尔兹

在数据可视化的奇妙世界里，力导向图就像是一场永不停歇的盛大舞会。每个数据节点都是舞池中的舞者，它们遵循着物理法则，相互吸引又彼此排斥，在三维空间中演绎出令人着迷的动态画面。今天，我们就借助 Three.js 这个强大的舞台搭建工具，一起打造这场数据的盛宴。

一、认识 Three.js 与力导向图

Three.js 就像一位技艺高超的舞台设计师，它能轻松搭建出逼真的三维场景，让我们的数据有了展示的舞台。而力导向图，从底层原理来讲，它借鉴了物理学中的力学模型。想象一下，节点之间存在着弹簧一样的吸引力，让有关系的数据节点想要靠近彼此；同时又有类似电荷的排斥力，防止节点们过度拥挤。通过不断模拟这些力的作用，最终达到一种动态平衡，呈现出清晰美观的图形结构。

在正式开始搭建之前，我们需要准备好舞台（引入 Three.js 库）。在 HTML 文件中，通过

xml 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r150/three.min.js"></script>

就像给我们的舞台安装好聚光灯和音响设备一样，为后续表演做好准备。

二、搭建基础舞台

首先，我们要创建一个场景，这就好比划定舞池的范围：

ini 复制代码

const scene = new THREE.Scene();

然后，创建一个相机，它决定了我们从哪个角度欣赏这场数据舞蹈：

ini 复制代码

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

接着，创建一个渲染器，它负责把我们搭建的场景渲染到页面上：

ini 复制代码

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

到这里，我们的基础舞台就搭建好了，就等着舞者（数据节点）登场了。

三、创建数据节点与边

我们先定义一些数据，假设有几个节点和它们之间的连接关系：

yaml 复制代码

const nodes = [
    { id: 0, x: 0, y: 0 },
    { id: 1, x: 1, y: 1 },
    { id: 2, x: -1, y: -1 }
];
const edges = [
    { source: 0, target: 1 },
    { source: 1, target: 2 },
    { source: 2, target: 0 }
];

接下来，我们要把这些数据转化为 Three.js 中的物体。先创建节点，我们可以把节点想象成一个个彩色的小球：

ini 复制代码

const geometry = new THREE.SphereGeometry(0.2);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
nodes.forEach(node => {
    const sphere = new THREE.Mesh(geometry, material);
    sphere.position.x = node.x;
    sphere.position.y = node.y;
    sphere.position.z = 0;
    scene.add(sphere);
});

然后创建边，边就像是连接舞者的丝带：

ini 复制代码

const lineGeometry = new THREE.BufferGeometry();
const positions = [];
const indices = [];
edges.forEach((edge, index) => {
    const source = nodes[edge.source];
    const target = nodes[edge.target];
    positions.push(source.x, source.y, 0);
    positions.push(target.x, target.y, 0);
    indices.push(index * 2);
    indices.push(index * 2 + 1);
});
lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
lineGeometry.setIndex(new THREE.Uint16BufferAttribute(indices, 1));
const lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
const line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);

此时，舞台上已经有了静态的舞者和连接它们的丝带，但还没有舞动起来。

四、赋予数据 "生命力"------ 力导向模拟

现在，我们要给这些数据节点赋予物理法则，让它们动起来。我们需要定义吸引力和排斥力的计算逻辑。这里我们可以简单理解为，吸引力会根据节点之间的距离，让有关系的节点相互靠近；排斥力则会防止节点们挤在一起。

我们先定义一些物理参数，比如弹簧的弹性系数（影响吸引力大小）和电荷的强度（影响排斥力大小）：

ini 复制代码

const springStrength = 0.1;
const chargeStrength = 0.01;

然后，在动画循环中，不断计算每个节点受到的力，并更新它们的位置：

ini 复制代码

function animate() {
    requestAnimationFrame(animate);
    nodes.forEach(nodeA => {
        let xForce = 0;
        let yForce = 0;
        nodes.forEach(nodeB => {
            if (nodeA !== nodeB) {
                const dx = nodeA.x - nodeB.x;
                const dy = nodeA.y - nodeB.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                // 计算排斥力
                const repulsion = chargeStrength / (distance * distance);
                xForce += (dx / distance) * repulsion;
                yForce += (dy / distance) * repulsion;
                // 检查是否有连接关系，计算吸引力
                const edge = edges.find(e => (e.source === nodeA.id && e.target === nodeB.id) || (e.source === nodeB.id && e.target === nodeA.id));
                if (edge) {
                    const idealDistance = 1;
                    const diff = idealDistance - distance;
                    const attraction = springStrength * diff;
                    xForce -= (dx / distance) * attraction;
                    yForce -= (dy / distance) * attraction;
                }
            }
        });
        nodeA.x += xForce;
        nodeA.y += yForce;
        // 更新Three.js中节点的位置
        const sphere = scene.children.find(c => c.userData.nodeId === nodeA.id);
        if (sphere) {
            sphere.position.x = nodeA.x;
            sphere.position.y = nodeA.y;
        }
    });
    // 更新边的位置
    const positions = [];
    edges.forEach(edge => {
        const source = nodes[edge.source];
        const target = nodes[edge.target];
        positions.push(source.x, source.y, 0);
        positions.push(target.x, target.y, 0);
    });
    lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
    lineGeometry.attributes.position.needsUpdate = true;
    renderer.render(scene, camera);
}
animate();

这样，数据节点就开始遵循物理法则，在舞台上翩翩起舞，不断调整位置，最终达到一种和谐的动态平衡状态。

五、进阶优化

5.1 优化性能

当数据量很大时，计算力的过程会变得非常耗时。我们可以采用一些优化技巧，比如空间分区，把场景划分为多个小区域，只计算同一区域或相邻区域节点之间的力，减少不必要的计算。

5.2 美化外观

我们可以给节点和边添加更多的样式，比如根据节点的重要程度改变颜色和大小，给边添加渐变效果等，让整个力导向图更加美观和富有表现力。

5.3 添加交互

让用户可以通过鼠标拖动节点，或者点击节点查看详细信息，增加用户与数据可视化的互动性，让这场数据舞会更加有趣。

通过以上步骤，我们成功地在 Three.js 中创建了一个力导向图，让枯燥的数据变成了灵动的舞者。在实际应用中，力导向图可以用于社交网络分析、知识图谱展示等多个领域。现在，你也可以发挥创意，去探索更多数据可视化的可能性，让数据在你的舞台上绽放出独特的魅力！

上述文章涵盖了 Three.js 力导向图从基础搭建到优化的全过程。若你觉得某些部分需要补充，或想尝试新的功能实现，欢迎和我说说。