D3 二维图表的绘制系列（二十二）桑基图sankey

最新推荐文章于 2025-04-16 09:32:05 发布

PAT-python-zjw

最新推荐文章于 2025-04-16 09:32:05 发布

阅读量5.9k

点赞数 6

分类专栏： D3.js 二维图表系列文章标签： d3

本文为博主原创文章，转载请务必附上文章网址，谢谢。

本文链接：https://blog.csdn.net/zjw_python/article/details/98611559

版权

上一篇：仪表盘图 https://blog.csdn.net/zjw_python/article/details/98596174

下一篇：旭日图 https://blog.csdn.net/zjw_python/article/details/98613674

代码结构和初始化画布的Chart对象介绍，请先看 https://blog.csdn.net/zjw_python/article/details/98182540

本图完整的源码地址： https://github.com/zjw666/D3_demo/tree/master/src/sanKeyChart/basicSanKey

1 图表效果

在这里插入图片描述

2 数据

桑基图的数据需要符合一定的规则，即包含nodes和links两个部分

{
   
    "nodes": [
        {
   "id": "a"},
        {
   "id": "b"},
        {
   "id": "c"},
        {
   "id": "d"},
        {
   "id": "e"},
        {
   "id": "f"},
        {
   "id": "g"},
        {
   "id": "h"},
        {
   "id": "i"}
    ],
    "links": [
        {
   "source": "a", "target": "d", "value": 10},
        {
   "source": "a", "target": "i", "value": 2},
        {
   "source": "b", "target": "d", "value": 8},
        {
   "source": "b", "target": "e", "value": 6},
        {
   "source": "c", "target": "e", "value": 5},
        {
   "source": "b", "target": "e", "value": 2},
        {
   "source": "b", "target": "i", "value": 4},
        {
   "source": "d", "target": "f", "value": 3},
        {
   "source": "d", "target": "g", "value": 4},
        {
   "source": "d", "target": "h",