d3-sankey-diagram 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00727/article/details/141877998

d3-sankey-diagram 开源项目教程

d3-sankey-diagramSankey diagram for d3项目地址:https://gitcode.com/gh_mirrors/d3/d3-sankey-diagram

项目介绍

d3-sankey-diagram 是一个基于 D3.js 的开源项目，专门用于创建和展示桑基图（Sankey diagrams）。桑基图是一种特殊的流图，主要用于表示能量、材料或成本等在系统中的流动和转换。该项目提供了丰富的 API 和配置选项，使得用户可以轻松地定制和生成复杂的桑基图。

项目快速启动

要快速启动并使用 d3-sankey-diagram，请按照以下步骤操作：

克隆项目仓库：

git clone https://github.com/ricklupton/d3-sankey-diagram.git

安装依赖：
```
cd d3-sankey-diagram
npm install
```
运行示例：
```
npm run example
```

在 HTML 中使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sankey Diagram Example</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="dist/d3-sankey-diagram.min.js"></script>
</head>
<body>
    <div id="sankey"></div>
    <script>
        const data = {
            nodes: [
                { id: "A", name: "Node A" },
                { id: "B", name: "Node B" },
                { id: "C", name: "Node C" }
            ],
            links: [
                { source: "A", target: "B", value: 10 },
                { source: "B", target: "C", value: 20 }
            ]
        };

        const diagram = d3.sankeyDiagram()
            .nodeWidth(15)
            .nodePadding(10)
            .extent([[1, 1], [800, 600]]);

        d3.select("#sankey")
            .datum(data)
            .call(diagram);
    </script>
</body>
</html>