【亲测免费】 D3.js 力导向图布局（d3-force）教程

2026-01-17 09:22:37作者：何举烈Damon

1. 项目介绍

D3.js 是一个强大的数据驱动文档库，而 d3-force 是其子模块，专门用于力导向图的布局。这个库利用了速度Verlet积分来实现动态交互的图形效果，常用来描绘网络节点之间的关系，例如社交网络或复杂的依赖关系图表。

2. 项目快速启动

要开始使用 d3-force，首先确保你的环境中已经安装了 D3.js 库。你可以通过以下命令安装：

npm install d3

下面是一个基本的使用示例，创建一个简单的力导向图：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>D3.js 力导向图</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <script>
        // 创建svg容器
        const svg = d3.select("body").append("svg")
                      .attr("width", 600)
                      .attr("height", 400);

        // 初始化力导向布局
        const simulation = d3.forceSimulation()
                            .force("charge", d3.forceManyBody())
                            .force("x", d3.forceX(300))
                            .force("y", d3.forceY(200));

        // 加入数据和节点
        const nodes = [{id: "node1"}, {id: "node2"}, {id: "node3"}];
        const links = [{source: nodes[0], target: nodes[1]}, {source: nodes[1], target: nodes[2]}];

        // 添加节点和连线
        svg.selectAll(".node")
           .data(nodes)
           .enter().append("circle")
           .attr("class", "node")
           .attr("r", 10)
           .call(d3.drag()
                 .on("start", dragstarted)
                 .on("drag", dragged)
                 .on("end", dragended));

        svg.selectAll(".link")
           .data(links)
           .enter().append("line")
           .attr("class", "link");

        // 启动模拟
        simulation.nodes(nodes);
        simulation.force("link", d3.forceLink(links).distance(50));
        simulation.on("tick", ticked);

        function ticked() {
            // 更新节点和连线的位置
            svg.selectAll(".node")
               .attr("cx", d => d.x)
               .attr("cy", d => d.y);

            svg.selectAll(".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);
        }

        function dragstarted(event, d) {
            if (!event.active) simulation.alphaTarget(0.3).restart();
            d.fx = d.x;
            d.fy = d.y;
        }

        function dragged(event, d) {
            d.fx = event.x;
            d.fy = event.y;
        }

        function dragended(event, d) {
            if (!event.active) simulation.alphaTarget(0);
            d.fx = undefined;
            d.fy = undefined;
        }
    </script>
</body>
</html>

上述代码中，我们创建了一个简单的力导向图，包含三个节点和两条连接它们的线。在每次模拟迭代时，节点的位置会被更新以反映力的作用。

3. 应用案例和最佳实践

复杂网络可视化：利用 d3-force 可以展示复杂的数据结构，如人际关系、公司组织架构或知识图谱。
交互性：允许用户拖拽节点来探索图表，增加交互体验。
动画过渡：可以设置模拟的持续时间和强度，使得状态变化平滑。
定制节点和链接样式：自定义节点形状、颜色、大小以及线条样式，增强视觉表现力。

最佳实践中，记得适当地调整各种力的参数以达到理想的平衡状态，并合理配置缩放和平移操作，使大型图形也能清晰呈现。

4. 典型生态项目

D3.js 示例：官方提供了大量示例代码，包括多种力导向图布局的应用。
Reingold-Tilford树布局：结合 d3-force 和其他 D3 模块，可实现树状图的力导向布局。
NPM 相关库：例如 d3-scale-chromatic 用于颜色映射，d3-zoom 处理缩放和移动，丰富了力导向图的表现形式。

通过这些项目和实践，你可以深入掌握 d3-force 的功能并应用到自己的数据可视化工作者中。祝你编码愉快！

d3-force

Force-directed graph layout using velocity Verlet integration.

项目地址：https://gitcode.com/gh_mirrors/d3/d3-force

登录后查看全文

【亲测免费】 D3.js 力导向图布局（d3-force）教程

1. 项目介绍

2. 项目快速启动

3. 应用案例和最佳实践

4. 典型生态项目

项目优选