基于D3.js绘制的桑基图（带有边隐现功能）

基于D3.js绘制的桑基图

桑基图（Sankey Diagram）是一种特殊类型的流图，它通过宽度不等的箭头直观地表示不同元素之间的流量大小，通常用于展示能量、材料、成本或其他资源的转移。桑基图的特点如下：

1. 流量可视化：桑基图通过箭头的宽度来表示流量的大小，宽度越大，流量越大。这使得比较不同路径的流量变得直观。
2. 流向清晰：它能够清晰地展示从一个节点到另一个节点的流向，非常适合展示转换过程或分配情况。
3. 层次关系：桑基图可以很好地表示层次结构，例如在能源转换、数据流或组织结构中，上层的输出可以作为下层的输入。
4. 交叉比较：由于流量的大小直接体现在视觉上，用户可以轻松地比较不同路径或节点之间的流量差异。

本文使用D3.js（版本5）绘制桑基图，提供变隐现，节点拖动，节点相关性高亮功能。

老规矩，先看结果：

一、桑基图json格式

在绘制桑基图之前，先了解桑基图的json结构。包含两个节点，nodes是节点名字通过id作为节点唯一标识，level是节点等级；links是用来记录连边的。source为始边，target为终边，value为权重。

[{
   
   
	"topic1": {
   
   
		"nodes": [{
   
   
				"id": "node1",
				"name": "topic1",
				"level": "1"
			}
             ......
		],
		"links": [{
   
   
				"source": "topic1",
				"target": "李信",
				"value": 8
			}
             ......
		]
	}
}]

二、 桑基图样式

<style>
    html,
    body {
   
   
        width: 100%;
        height: 100%;
    }
    /* svg */
    .svgsankey {
   
   
        background-color: black;
    }
    /* svg容器 */
    .sankey {
   
   
        width: 100%;
        height: 100%;
    }
    /* 节点矩形 */
    .node rect {
   
   
        cursor: move;
        fill-opacity: .9;
        shape-rendering: crispEdges;
    }
    /* 节点文本 */
    .node text {
   
   
        pointer-events: none;
        fill: rgb(131, 19, 19);
        /* text-shadow: 0 1px 0 #fff;*/
    }
    /* 链接 */
    .selected .link {
   
   
        stroke-opacity: .5;
    }
</style>

三、基础配置

主要设置画布长宽，颜色比例尺，透明度变化前后的值。

const width = 800;
const height = 600;
//边距
let margin = {
   
    top: 10,right: 10,bottom: 10,left: 10};
let opacityLow = 1, //新透明度
    opacityDefault = 0.3; //默认透明度
let maxLevel = 1;
// 定义颜色比例尺
let color = d3.scaleOrdinal(["rgb(255, 138, 128)", "rgb(255, 255, 0)", "rgb(234, 128, 252)",
    "rgb(29, 233, 182)", "rgb(130, 177, 255)", "rgb(132, 255, 255)",
    "rgb(167, 255, 235)"
])

添加画布

let svg = d3.select(".sankey")
    .append("svg