国内机场航线环路分析示例 2D效果示例 3D效果示例

Shiny APP通过IFRAME嵌入网页的方案非常灵活,可以嵌入任何现存的传统WEB界面应用系统,从而扩充系统的功能,集成深度数据分析与展示的能力,盘活存量的软硬件与数据资产。
但Shiny APP与嵌入的网页窗口之间要能够通过javascript在程序的层面互相操作(流程与数据),实现真正的集成连通,嵌入才有意义。
浏览器有同源规则的安全限制,不同源的网页之间不能互相操作。Shiny APP与宿主网页一般是不同源的,即协议+域名+端口三项一般不完全一致,这里通过HTML5引入的跨文档通信 API(Cross-document messaging)来解决,这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。
传入的参数可以用于为Shiny APP设定初始的运行状态,传出的参数可以向调用者报告APP运行的状态或结果,从而实现与嵌入环境的集成。
本示例先按《传入》按钮传入数据给嵌入的Shiny APP,记录调用的父窗口,然后才可以按《传出》按钮传出数据给父窗口。
通过Shiny.setInputValue(id, data)通知Shiny服务器端input变量的更新事件,Shiny的reactive与observe机制会被触发更新所有相关的变量与状态,但浏览器端的可视化控件,比如本例的selectInput等,是JS 的C3控件,不会自动更新,要由服务器端通知浏览器去更新,通过在observeEvent()中调用updateSelectInput(session, id, value = data)来完成。父窗口的页面源码包含了发消息给IFRAME中Shiny APP的javascript,可以在浏览器中查看页面的源码。
本例中要打开“记录点击的结点”开关选择结点,然后点击《传出》按钮传给父窗口。因为可视化分析网络要缩放、拖动,这时点击结点就不是选中。
本例会自动高亮显示选中结点之间的边,并且会有动画效果,会有光子从各边的源运动到目标,光子的数量与速度显示整个子网承载对象的流量情况。单击一条边也会有动画效果。这是3D Force Directed Grap库与ThreeJS库的方便功能。动画增加了第4维时间维,还可以通过设定物体的颜色、大小、形状、纹理等来增加更多的视觉维度。
如果有多重边,就要通过.linkCurvature(curv)设置曲率,比如.linkCurvature(0.25),否则会合并显示为一条直线。设置曲率后缩放时要重新计算一次,计算量大(每条边100个点)有点卡,不过算好后旋转移动的速度就不受影响。
查询环路的速度受网络稠密程度影响,航线网络比较稠密,本例中查询4跳以内的环路,10秒以内,5跳的话大约3分钟,其它网络没有这么稠密跳数可以多一点。

国内机场列表

传出选中的结点: