内容简介：节选一段来自 AntV 上关于桑基图通常的使用场景，是有明确的指向性的。因此也有人尝试用渐变动画、粒子效果等来表现这种流向。下面展示的这个场景，就是用来表现患者就诊过程中的数量和比例的变化，属于比较常规经典的做法。加入流动效果后，可以更加直观地表现这一含义，选中节点后，它所对应的上下游关系会被高亮，从而能更方便地分析和感知。
关于桑基图
节选一段来自 AntV 上关于 桑基图的定义
桑基图 (Sankey Diagram)，是一种特定类型的流图，用于描述一组值到另一组值的流向。上图为1869年，查尔斯米纳德（Charles Minard）绘制的1812年拿破仑征俄图（Map of Napolean's Russian Campaign of 1812），这是一个在地图上覆盖桑基图的流程图。1898年爱尔兰人Matthew Henry Phineas Riall Sankey 在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图，此后便以其名字命名为 Sankey 图，中文音译为桑基图。 图中延伸的分支的宽度对应数据流量的大小。桑基图的特点如下： - 起始流量和结束流量相同，所有主支宽度的总和与所有分出去的分支宽度总和相等，保持能量的平衡； - 在内部，不同的线条代表了不同的流量分流情况，它的宽度成比例地显示此分支占有的流量； - 节点不同的宽度代表了特定状态下的流量大小。
桑基图的流量含义
桑基图通常的使用场景，是有明确的指向性的。因此也有人尝试用渐变动画、粒子效果等来表现这种流向。
下面展示的这个场景，就是用来表现患者就诊过程中的数量和比例的变化，属于比较常规经典的做法。加入流动效果后，可以更加直观地表现这一含义，选中节点后，它所对应的上下游关系会被高亮，从而能更方便地分析和感知。
实现方案
桑基图的主体是使用 Observable 上的 Flow-o-matic 的例子，它主要用的是 d3.js 中的 sankey 工具。
动态效果使用了在 SVG 内嵌入 ForeignObject 的 canvas 元素，并通过 THREE.js 来渲染 WebGL 的方式，直接制作 SVG 动画性能不佳，而 WebGL 和 SVG 能在这个例子上实现互补，体现了现代浏览器技术的进步。
示例
以上所述就是小编给大家介绍的《有动态效果的桑基图》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- [译] 通过 GASP 让 Vue 实现动态效果
- 原生JS实现抛物线动画以及动态模糊效果
- 漂亮的动态气泡背景效果bubbly-bg.js
- 前端基础入门五（掌握jQuery的常用api，实现动态效果）
- html5 canvas实现背景鼠标连线动态效果代码解析
- jQuery效果—雪花飘落
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
