D3.js 力导向图布局（d3-force）教程

最新推荐文章于 2024-09-29 20:55:25 发布

诸莹子Shelley

最新推荐文章于 2024-09-29 20:55:25 发布

阅读量593

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00948/article/details/141207184

版权

D3.js 力导向图布局（d3-force）教程

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

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>

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