【亲测免费】 D3-Sankey 开源项目教程

2026-01-18 10:34:07作者：尤峻淳Whitney

项目介绍

D3-Sankey 是一个用于可视化有向无环网络中节点间流量关系的开源项目。它基于 D3.js 库，通过 Sankey 图表展示数据流，特别适用于能源、物流、网络流量等领域的数据分析。该项目由 Mike Bostock 创建，并在 GitHub 上开源，遵循 BSD-3-Clause 许可证。

项目快速启动

安装

首先，你需要在你的项目中引入 D3 和 D3-Sankey 库。你可以通过以下方式加载这些库：

<script src="https://unpkg.com/d3@7"></script>
<script src="https://unpkg.com/d3-sankey@0"></script>

基本示例

以下是一个简单的 Sankey 图表示例，展示了如何从 CSV 文件中加载数据并生成图表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sankey Diagram</title>
    <script src="https://unpkg.com/d3@7"></script>
    <script src="https://unpkg.com/d3-sankey@0"></script>
    <style>
        .node rect {
            fill-opacity: .9;
            shape-rendering: crispEdges;
        }
        .node text {
            pointer-events: none;
            text-shadow: 0 1px 0 #fff;
        }
        .link {
            fill: none;
            stroke: #000;
            stroke-opacity: .2;
        }
        .link:hover {
            stroke-opacity: .5;
        }
    </style>
</head>
<body>
<script>
    // 数据加载和图表生成代码
</script>
</body>
</html>

应用案例和最佳实践

能源生产流程

一个常见的应用案例是展示能源生产流程。通过 Sankey 图表，可以清晰地展示能源从生产到消费的各个环节，帮助分析能源效率和优化能源分配。

网络流量分析

在网络流量分析中，Sankey 图表可以展示数据包在网络中的流动路径，帮助网络管理员识别瓶颈和优化网络结构。

典型生态项目

D3.js

D3.js 是一个强大的数据可视化库，提供了丰富的 API 和工具，支持各种图表类型。D3-Sankey 作为 D3.js 的一个插件，扩展了其功能，使其能够处理和展示复杂的流量数据。

Observable

Observable 是一个在线笔记本平台，支持实时数据分析和可视化。许多 D3 和 D3-Sankey 的示例和教程都可以在 Observable 上找到，为开发者提供了丰富的学习资源。

通过以上内容，你可以快速了解和使用 D3-Sankey 项目，并探索其在不同领域的应用。希望这篇教程对你有所帮助！

d3-sankey

Visualize flow between nodes in a directed acyclic network.

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

登录后查看全文