JavaScript数据可视化_D3.js力导向图实现-js教程-PHP中文网

JavaScript数据可视化_D3.js力导向图实现

紅蓮之龍

发布： 2025-11-18 20:14:02

原创

283人浏览过

首先引入D3库并定义包含nodes和links的数据结构，接着创建SVG容器并初始化力模拟，设置边、电荷和中心力；然后绘制连线、节点及标签，最后通过监听tick事件更新元素位置，并添加拖拽交互以实现动态调整。

javascript数据可视化_d3.js力导向图实现

力导向图（Force-directed Graph）是数据可视化中常见的一种形式，特别适合展示节点之间的关系网络。D3.js 作为强大的 JavaScript 可视化库，提供了完整的物理引擎支持，可以轻松实现力导向图。下面介绍如何使用 D3.js 创建一个基础但功能完整的力导向图。

准备环境与数据结构

要使用 D3.js 实现力导向图，首先引入 D3 库。可以通过 CDN 引入最新版本：

力导向图的数据通常包含两个数组：nodes（节点）和 links（边）。例如：

const graph = {
  nodes: [
    { id: "A" },
    { id: "B" },
    { id: "C" }
  ],
  links: [
    { source: "A", target: "B" },
    { source: "B", target: "C" }
  ]
};

登录后复制

每个节点有唯一 id，每条边指定 source 和 target 节点。

立即学习“Java免费学习笔记（深入）”；

创建 SVG 容器与力模拟

使用 SVG 绘制图形，并初始化 D3 的力模拟（force simulation）：

const width = 800;
const height = 600;

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const simulation = d3.forceSimulation(graph.nodes)
  .force("link", d3.forceLink(graph.links).id(d => d.id).distance(100))
  .force("charge", d3.forceManyBody().strength(-300))
  .force("center", d3.forceCenter(width / 2, height / 2));

登录后复制

说明：

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

110

查看详情

forceLink：定义边的连接关系，distance 控制边长
forceManyBody：提供节点间的斥力（负 strength 表示排斥）
forceCenter：将整个图居中于画布中心

绘制节点与连线

在 SVG 中添加线段表示边，圆形表示节点：

const link = svg.append("g")
  .selectAll("line")
  .data(graph.links)
  .enter()
  .append("line")
  .attr("stroke", "#999")
  .attr("stroke-width", 1);

const node = svg.append("g")
  .selectAll("circle")
  .data(graph.nodes)
  .enter()
  .append("circle")
  .attr("r", 8)
  .attr("fill", "#4285f4")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended)
  );

登录后复制

同时为节点添加标签（可选）：

const label = svg.append("g")
  .selectAll("text")
  .data(graph.nodes)
  .enter()
  .append("text")
  .text(d => d.id)
  .attr("font-size", 12)
  .attr("dx", 12)
  .attr("dy", 4);

登录后复制

绑定力模拟与更新位置

监听模拟的 tick 事件，在每次迭代后更新节点、边和标签的位置：

simulation.on("tick", () => {
  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);

  node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y);

  label
    .attr("x", d => d.x)
    .attr("y", d => d.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 = null;
  d.fy = null;
}

登录后复制

通过设置 d.fx 和 d.fy，可以在拖动时固定节点位置，提升交互体验。

基本上就这些。只要数据结构清晰，D3 力导向图就能自动布局并支持交互。可根据需要添加颜色映射、提示框、缩放等功能进一步增强可视化效果。

以上就是JavaScript数据可视化_D3.js力导向图实现的详细内容，更多请关注php中文网其它相关文章！