d3.js布局（layout）带来别具一格的动态图表体验

前端

2023-09-17 16:46:48

数据可视化之魂：d3.js 布局

什么是 d3.js 布局？

在数据可视化领域，布局至关重要，它决定了数据如何在视觉上呈现。d3.js 布局是一个强大的工具集，可以将数据映射到几何图形中，创造各种形式的图表和图形。它就像一副画布，为您的数据提供结构和组织，使它们变得易于理解和直观。

布局类型

d3.js 提供了多种布局算法，涵盖不同的可视化需求：

力导向布局： 模拟物理力，让节点根据其连接和权重相互吸引或排斥，从而形成动态网络图。
树状布局： 将树形数据结构转换为树状图，清晰地显示层次结构和父子关系。
层状布局： 将数据组织成层次结构，按层排列，用于构建金字塔图或组织结构图。
簇状布局： 通过聚类分析对数据分组，创建簇状图或气泡图。
饼图布局： 将数据划分为扇形区域，展示数据比例或构成。
弦图布局： 将数据转换为弦图形式，揭示数据之间的联系和流动。

应用示例：交互式网络图

为了说明 d3.js 布局的强大功能，让我们创建一个交互式网络图，展示节点之间的联系：

// 数据
const nodes = [
  { id: "A", connected: ["B", "C"] },
  { id: "B", connected: ["A", "D"] },
  { id: "C", connected: ["A", "E"] },
  { id: "D", connected: ["B", "F"] },
  { id: "E", connected: ["C", "F"] },
  { id: "F", connected: ["D", "E"] }
];

// 布局
const force = d3.forceSimulation()
  .nodes(nodes)
  .force("link", d3.forceLink().id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter());

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

// 连线
const links = svg.selectAll("line")
  .data(force.force("link").links())
  .enter().append("line")
  .attr("stroke", "#aaa")
  .attr("stroke-width", 1);

// 节点
const nodes = svg.selectAll("circle")
  .data(force.nodes())
  .enter().append("circle")
  .attr("r", 5)
  .attr("fill", "#666")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

// 仿真
force.alpha(0.5).restart();

// 更新
function tick() {
  links
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);

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

// 拖拽事件
function dragstarted(event, d) {
  if (!event.active) force.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) force.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

// 定时更新
d3.timer(tick);