桑基图 r语言 networkD3 桑基图关键特性

桑基图粗略讲解

是一种特殊的流图(可以看作是有向无环图)。它主要用来表示原材料、能量等如何从最初形式经过中间过程的加工或转化达到最终状态，观察数据的流转情况。

桑基图风格设置

1.节点统一为一个颜色，边呈现渐变效果（√本次要讲）

2.自定义节点风格，边是依赖两个节点颜色的渐变效果

设置图表配置项及数据

可参考echarts官网配置

重点讲解系列列表（series）配置：

节点数据属性

data:[{
name:      //节点的名字,
value:	   //节点的值,可用来指定节点的纵向高度或横向的宽度。
depth:     //节点所在的层,取值从0开始。
},
{
...
}]//包含所有节点数据

节点关系数据属性

link[{
source:   //用于设置关系边的源节点名称
target:   //设置关系边的目标节点名称
value:    //设置关系边的数值，决定边的宽度。
},
{
...
}
]

节点样式

itemStyle:{
borderWidth:     //设置节点的边界宽度
color:           //设置节点颜色
borderColor:     //设置节点的边界颜色色
}

关系边的线条样式

lineStyle{
color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{  //设置边为水平方向从左往右渐变
     	  offset:      //颜色位置，0-1
     	  color:       //起始颜色属性
	 },{
	      offset:      //同上
	      color:       //末尾颜色属性
	 }]),
	curveness:     //设置边的曲度
	opacity:       //设置透明度，0-1
}

注：ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

讲解echarts 渐变内置生成器

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

new echarts.graphic.LinearGradient(x0, y0, x1, y1, arr[n])
/*
前四个参数分别是 x0,y0,x1,y1(右下左上)
x0, y0, x1, y1的值为0 / 1,
x0: arr中的颜色‘ 从右到左’ 变化
y0: arr中的颜色‘ 从下到上’ 变化
x1: arr中的颜色‘ 从左到右’ 变化
y1: arr中的颜色‘ 从上到下’ 变化
*/

//第5个参数则是一个数组, 用于配置颜色的渐变过程。每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色。
例如：
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#a5b4bf',
    },
    {
        offset: 1,
        color: '#429ee8'
    } //有几个渐变色写几组
])

代码实例：

let option = {
    series: {
        type: 'sankey',

        focusNodeAdjacency: 'true',
        //emphasis: {
        //    focus: 'adjacency'
        //}, //当鼠标移动到桑基图的节点或边时，高亮显示两个节点以及相邻的边。

        data: [{
                name: '北京'
            },
            {
                name: '武汉'
            },
            {
                name: '深圳'
            },
            {
                name: '西安'
            },
            {
                name: '上海'
            },
        ],
        links: [{
                source: '北京',
                target: '上海',
                value: 2000
            },
            {
                source: '北京',
                target: '深圳',
                value: 3000
            },
            {
                source: '西安',
                target: '上海',
                value: 500
            },
            {
                source: '武汉',
                target: '上海',
                value: 1000
            },
        ],
        itemStyle: {
            borderWidth: 1,
            borderColor: '#fff',
            color: '#203A43',
            opacity: 0.3 
        }, //桑基图节点样式
        lineStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ //设置边为水平方向从左往右渐变
                offset: 0,
                color: '#005AA7' 
            }, {
                offset: 1,
                color: '#FFFDE4' 
            }]),
            curveness: 0.5, //设置边的曲度
            opacity: 0.7 //设置边的透明度
        }, //桑基图关系边样式
    }
};

页面：