【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制

  • 什么是桑基图
  • 用D3绘制简单的Sankey图
  • 添加文字
  • 圆形节点
  • 添加交互效果

  • 注:本文未经作者允许严禁转载和演绎

1 什么是桑基图?

桑基图流图flow diagram )的一种,用来描述能量,人口,经济等的流动情况。最早由爱尔兰人Matthew Henry Phineas Riall Sankey 提出。Sankey是一名船长也是工程师,1898年Sankey在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图,后来被命名为Sankey图,中文音译为桑基图。

桑基图主要关注能量、物料或资本等在系统内部的流动和转移情况。起始流量和结束流量相同;在内部,不同的线条代表了不同的流量分流情况,它的宽度成比例地显示此分支占有的流量;节点不同的宽度代表了特定状态下的流量大小。

2 用D3绘制简单的Sankey图

D3提供一个Sankey插件,可以用来根据输入的节点-连接数据转换为桑基图布局所用的中间数据。这些中间数据可以很方便地结合SVG的矩形元素(rect)绘制节点,结合路径元素(path)就可以绘制链接。使得用D3绘制Sankey图很方便。图1展示了绘制效果。


【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制_第1张图片
图1 绘制简单的桑基图

下面我们来详细介绍如果实现sankey图的绘制:

首先,绘制sankey图需要引入D3库以及Sankey插件库:

<script src="../d3.js" charset="utf-8"></script >

                    
                    

你可能感兴趣的:(数据可视化)