用HTML canvas绘制类桑基图，妙手生花，描绘数据之流

前端

2023-09-02 17:16:37

桑基图简介：揭开数据之流的神秘面纱

桑基图，一种别具匠心的图表形式，它以清晰直观的方式呈现数据在系统中的流动情况。凭借其简洁的设计，桑基图成功地捕获了数据从一个节点流向另一个节点的过程，揭开了数据旅程的神秘面纱。

Canvas绘图：数字画板上的视觉盛宴

HTML canvas元素充当一块数字画布，凭借其非凡的绘图能力，使我们能够在网页上创造出视觉盛宴。无论您是想绘制简单的形状、色彩鲜艳的图形还是复杂的图表，canvas都能满足您的需求，助力您挥洒创意，绘出心中所想。

类桑基图的精髓：灵活变通，无拘无束

在深入了解桑基图之前，有必要澄清，我们将创建一种“类桑基图”，它与传统桑基图略有不同。我们的类桑基图不遵循能量守恒的原则，这样可以简化实现过程，使我们能够专注于展现数据流向。

数据结构：搭建数据之桥

构建桑基图的第一步是组织数据，使其适合可视化。我们将使用一个简单的结构，其中包含节点和链接。每个节点代表数据流入或流出的位置，而链接则表示数据在节点之间流动的方向。

// 节点结构
struct Node {
  id: string;
  name: string;
};

// 链接结构
struct Link {
  source: string;
  target: string;
  value: number;
};

算法：编织数据之网

有了数据结构后，我们需要一种算法来将数据转换为适合在canvas上绘制的格式。算法的主要目标是计算出每个链接的宽度，使其与数据流的大小成正比。

function calculateLinkWidths(nodes: Node[], links: Link[]) {
  // 计算每个链接的权重
  for (const link of links) {
    link.weight = Math.sqrt(link.value);
  }

  // 归一化权重
  const maxWeight = Math.max(...links.map(link => link.weight));
  for (const link of links) {
    link.weight /= maxWeight;
  }

  // 计算每个链接的宽度
  for (const link of links) {
    link.width = link.weight * 10;
  }
}

绘制类桑基图：让数据跃然纸上

现在，我们已经有了经过处理的数据，就可以开始绘制类桑基图了。我们使用canvas的绘图API来绘制节点和链接，最终呈现出数据流向的清晰图景。

function drawSankeyDiagram(canvas: HTMLCanvasElement, nodes: Node[], links: Link[]) {
  const ctx = canvas.getContext("2d");

  // 绘制节点
  for (const node of nodes) {
    ctx.fillStyle = "#666";
    ctx.fillRect(node.x, node.y, node.width, node.height);
    ctx.fillStyle = "#fff";
    ctx.fillText(node.name, node.x + 5, node.y + 15);
  }

  // 绘制链接
  for (const link of links) {
    const sourceNode = nodes.find(node => node.id === link.source);
    const targetNode = nodes.find(node => node.id === link.target);

    ctx.beginPath();
    ctx.moveTo(sourceNode.x + sourceNode.width, sourceNode.y + sourceNode.height / 2);
    ctx.lineTo(targetNode.x, targetNode.y + targetNode.height / 2);
    ctx.strokeStyle = "#ccc";
    ctx.lineWidth = link.width;
    ctx.stroke();
  }
}